Comment utiliser la boîte à lumière du plugin lightbox?

Je souhaite afficher le contenu d'une div masquée dans une zone lumineuse lors du chargement de la page.Comment utiliser la boîte à lumière du plugin lightbox?

Comment est-ce que je peux faire ceci avec color box?

Ce que je ne comprends pas:

Ai-je besoin d'utiliser leurs fichiers CSS? Lesquels, où est-ce?

Comment faire pour que la visionneuse apparaisse lorsque la page est chargée?

J'ai essayé, mais pas de chance:

$(document).ready(function(){ 
    $("#div_id_i_want_to_show").colorbox({width:"50%", inline:true}); 
});

Source

2009-08-07 Greg

La réponse de joseph était sur la bonne voie. J'ai aussi dû rendre le div visible avant qu'il n'apparaisse (sinon, il montre juste un écran noir). et puis j'ai dû cacher la div après que l'utilisateur ferme la boîte à lumière.

Note: J'ai également dû éditer le fichier css pour pointer vers le répertoire où j'ai mis mes images.

Voici mon code final:

$(document).ready(function(){ 
    $('#div_id_i_want_to_show').show(); 
    $.colorbox({'href':'#div_id_i_want_to_show', 'inline':true, 'width':'600px', 'height':'600px'}); 
    $(document).bind('cbox_closed', function(){ 
      $('#div_id_i_want_to_show').hide(); 
    }); 
});

Source

2009-08-08 16:05:48 Greg

Vous pouvez renoncer à la projection et de se cacher en plaçant le div ce que vous voulez montrer "#div_id_i_want_to_show" dans un div caché. – mcassano

Vous avez besoin d'utiliser le fichier css ColorBox de quel que soit le thème que vous voulez. Il y a 5 inclus dans le téléchargement. Voir les dossiers Exemple1, 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 ColorBox sur la charge de page, vous devez utiliser la méthode publique: .colorbox $()

Exemple de travail: http://jsbin.com/uficu

Dans cet exemple je html: <div id="content">Hello from JSBin</div>

et la méthode publique: .colorbox $ ({href: '# content', ouvert: true, en ligne: true})

Vérifiez la documentation: http://colorpowered.com/colorbox/

Source

2009-08-08 02:52:45 jyoseph

Essayez Olli l'option ouverte.

$(".el").colorbox({open:true})

Source

2009-11-28 18:30:04 johnnymire

Voici une astuce. Il n'est pas nécessaire d'ajouter javascript (ou d'accrocher l'événement close de colorbox) pour cela. Jquery.colorbox relocalise votre contenu en ligne dans une structure qu'il crée à partir de la racine html> body, avant de l'afficher, et le replace lorsqu'il est fermé. C'est un comportement étrange IMO, mais profitez-en et appliquez votre «règle de masquage» en conséquence.

<style> 
#div_id_i_want_to_show { display: block; ...your other style rules... } 
#divParent #div_id_i_want_to_show { display: none; } 
<style> 
<div id='parent'><div id='div_id_i_want_to_show'>...

Alternativement, inversez les règles et placez une «règle de révélation» qui dépend d'un élément défini par colorbox.

<style> 
#div_id_i_want_to_show { display: none; ...your other style rules... } 
.colorbox #div_id_i_want_to_show { display: block; } 
<style> 
<div id='div_id_i_want_to_show'>...

Oh, aussi, une autre option est de garder votre #div_id_i_want_to_show à l'intérieur d'une enveloppe .hiddenDiv.

<style> 
#div_id_i_want_to_show { ...your style rules... } 
.hiddenDiv { display: none; } 
<style> 
<div class='.hiddenDiv'><div id='div_id_i_want_to_show'>...

Source

2010-11-22 19:02:34 Shannon

En cliquant sur une touche emailPopup

<div class="emailUse"> 
    <a class="emailPopup" href="#emailPopup_content">Mail Me</a> 
</div>

Vous voulez ouvrir une pop-up dont l'id est emailPopup_content utilise colorbox

<div style='display: none'> 
    <div id='emailPopup_content'> 
    Hi user, 
    Thank you! 
    </div> 
</div>

Tout ce que vous devez faire est d'écrire le jQuery:

$(document).ready(function() { 
    $('.emailPopup').colorbox({inline:true, width:"380px",height:"410px"}); 
});

Explication: le emailPopup_content caché div jQuery est affichée dans le menu contextuel comme référencé sous href

ne pas oublier d'inclure:

<head> 
    <link rel="stylesheet" href="colorbox.css"> 
    <script src="jquery.min.js"></script> 
    <script src="jquery.colorbox-min.js"></script> 
</head>

http://www.jacklmoore.com/colorbox/jquery.colorbox.js http://www.jacklmoore.com/colorbox/example4/colorbox.css

Source

2015-09-29 12:23:01 KNU

Comment utiliser la boîte à lumière du plugin lightbox?

Répondre

Questions connexes