Je veux montrer le contenu d'une div cachée dans une boîte de lumière lorsque la page se charge.
Comment puis-je faire cela avec Color Box ? P>
Ce que je ne comprends pas: p>
Dois-je utiliser leurs fichiers CSS? Lesquels, où est-ce? P>
Comment puis-je faire venir la passerelle lorsque la page se charge? P>
J'ai essayé cela mais pas de chance: P>
$(document).ready(function(){
$("#div_id_i_want_to_show").colorbox({width:"50%", inline:true});
});
5 Réponses :
Vous devez utiliser le fichier Colorbox CSS à partir du thème que vous souhaitez. Il y a 5 inclus dans le téléchargement. Voir l'exemple de dossiers1, exemple2, exemple3, exemple4, exemple5. Chacun aura un fichier CSS et un dossier avec des images. Vous pouvez également créer votre propre thème personnalisé, si vous le souhaitez.
Pour ouvrir Cololbox sur la page Charge, vous devez utiliser la méthode publique: $ .Colorbox ()
Exemple de travail: http://jsbin.com/uficu
Dans cet exemple, j'ai HTML: et la méthode publique: $ .Colorbox ({href: '# contenu', ouvert: true, inline: true})
Consultez la documentation: http://colorpowered.com/colorbox/ Bonjour de JSBIN
0 commentaires
La réponse de Jyoseph était sur la bonne voie. J'ai aussi dû rendre la div visible avant de montrer (sinon cela montre simplement un écran noir). puis j'ai dû cacher le div après la fermeture de la boîte de lumière.
Remarque: j'ai également dû modifier le fichier CSS pour pointer vers le répertoire où je mets mes images.
Voici ma finale Code:
Vous pouvez renoncer à la montrage et à la masquage en plaçant le div ce que vous voulez montrer "#div_id_i_want_to_show" à l'intérieur d'une DIV cachée.
Essayez l'option Open Olli.
Voici un tour. Il n'est pas nécessaire d'ajouter JavaScript (ou d'accrocher l'événement Colorbox Fermer) pour cela.
jquery.colorbox déménage votre contenu en ligne dans une structure qui crée la racine du corps HTML> avant de l'afficher et le déplace lorsque c'est fermé. C'est un comportement étrange imo, mais profitez et appliquez votre «règle de masque» en conséquence. alternativement, inverser les règles et placer une "règle de révélation" qui dépend d'une coloration Élément défini. oh, également, une autre option consiste à conserver votre #div_id_i_want_to_show à l'intérieur d'une enveloppe .hiddendivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivivive
En cliquant sur le bouton EMAUDEPOPUP CODE> <head>
<link rel="stylesheet" href="colorbox.css">
<script src="jquery.min.js"></script>
<script src="jquery.colorbox-min.js"></script>
</head>