Lightbox
Caractéristiques
- Affiche les images dans l'outil Magnific Popup
- Utilisation d'un souris, écran tactile ou clavier pour une navigation facile.
Exemples
Description longue d'image 2
Exemple d'une description longue d'image 2 (référencé par aria-describedby).
Articles seules
-
- AJAX - Exemple 1
- AJAX - remplacer le comportement par défaut d'un lien sur une image avec lbx-ajax
- Contenu incorporé
- Contenu incorporé plein écran
- Contenu superposé modal
- AJAX - Contenu filtrer par le « hash » de l'URL (v4.0.7+)
- AJAX - Contenu filtrer par un sélecteur (v4.0.12+)
Code
Visualiser le code
<ul class="list-inline"> <li> <a class="wb-lbx" href="demo/img/1_b.jpg" title="Image 1"> <img src="demo/img/1_s.jpg" alt="Image 1" /> </a> </li> <li> <a class="wb-lbx" title="Exemple de contenu AJAX" href="ajax/ajax-en.html">Contenu AJAX</a> </li> <li> AJAX - remplacer le comportement par défaut d'un lien sur une image avec lbx-ajax<br /> <a class="wb-lbx lbx-ajax" title="AJAX - Exemple 1 de contenu AJAX" href="ajax/ajax1-fr.html"><img src="demo/img/1_s.jpg" alt="Image 1" /></a> </li> <li> <a class="wb-lbx" title="Exemple de contenu incorporé" href="#inline_content">Contenu incorporé</a> <div id="inline_content" class="mfp-hide modal-dialog modal-content overlay-def"> <section class="modal-content"> <header class="modal-header overlay-hd"> <h2 class="modal-title">Titre</h2> </header> <div class="modal-body"> ... </div> </section> </div> </li> <li> <a class="wb-lbx" title="Exemple de contenu incorporé plein écran" href="#inline_content_full_width">Contenu incorporé plein écran</a> <section id="inline_content_full_width" class="mfp-hide modal-content overlay-def"> <header class="modal-header"> <h2 class="modal-title">Titre</h2> </header> <div class="modal-body"> ... </div> </section> </li> <li> <a class="wb-lbx lbx-modal" title="Exemple de contenu superposé modal" href="#inline_content_modal">Contenu superposé modal</a> <div id="inline_content_modal" class="mfp-hide modal-dialog modal-content overlay-def"> <section class="modal-content"> <header class="modal-header overlay-hd"> <h2 class="modal-title">Titre</h2> </header> <div class="modal-body"> ... </div> </section> </div> </li> <li> <a class="wb-lbx" title="AJAX - Contenu filtrer par le « hash » de l'URL" href="ajax/ajax4-fr.html#filter-id">AJAX - Contenu filtrer par le « hash » de l'URL (v4.0.7+)</a> </li> <li> <a class="wb-lbx" title="AJAX - Contenu filtrer par un sélecteur" href="ajax/ajax4-fr.html" data-wb-lbx='{"filter": ".filter-selector"}'>AJAX - Contenu filtrer par un sélecteur (v4.0.12+)</a> </li> </ul>Galeries
Galerie d'images
Code
Visualiser le code
<section class="wb-lbx lbx-gal"> <h4>Galerie d'images</h4> <ul class="list-inline"> <li> <a href="demo/img/1_b.jpg" title="Image 1"> <img src="demo/img/1_s.jpg" alt="Image 1" /> </a> </li> <li> <a href="demo/img/2_b.jpg" title="Image 2"> <img src="demo/img/2_s.jpg" alt="Image 2" aria-describedby="image2-desc" longdesc="#image2-desc" /> </a> </li> <li> <a href="demo/img/3_b.jpg" title="Image 3"> <img src="demo/img/3_s.jpg" alt="Image 3" /> </a> </li> <li> <a href="demo/img/4_b.jpg" title="Image 4"> <img src="demo/img/4_s.jpg" alt="Image 4" /> </a> </li> </ul> </section>Galerie d'AJAX
Code
Visualiser le code
<section class="wb-lbx lbx-gal"> <h4>Galerie d'AJAX</h4> <ul> <li> <a title="AJAX - Exemple 1 de contenu AJAX" href="ajax/ajax1-fr.html">AJAX - Exemple 1</a> </li> <li> <a title="AJAX - Exemple 2 de contenu AJAX" href="ajax/ajax2-fr.html">AJAX - Exemple 2</a> </li> <li> <a title="AJAX - Exemple 3 de contenu AJAX" href="ajax/ajax3-fr.html">AJAX - Exemple 3</a> </li> </ul> </section>Galeries cachés
Titre de l'image alternative
Image 1 : Lorem ipsum consectetur adipiscing elit.
Image 2 : Nulla mollis dolor leo. Quisque laoreet tincidunt mollis. Duis posuere scelerisque lectus quis lobortis.
Code
Visualiser le code
<div class="wb-lbx lbx-gal inline-lst"> <ul> <li> <a href="demo/img/1_b.jpg" title="Image 1" data-title="image_1_b"> <img src="demo/img/1_s.jpg" alt="Image 1" /> </a> </li> <li> <a href="demo/img/2_b.jpg" title="Image 2" data-title="image_2_b"> <img src="demo/img/2_s.jpg" alt="Image 2" aria-describedby="image2-desc" longdesc="#image2-desc" /> </a> </li> </ul> </div> <p id="image_1_b"><strong>Image 1 :</strong> Lorem ipsum consectetur <em>adipiscing elit</em>.</p> <p id="image_2_b"><strong>Image 2 :</strong> Nulla mollis dolor leo. Quisque laoreet tincidunt mollis. Duis posuere scelerisque lectus quis lobortis.</p>Ouvrir de contenu superposé « Lightbox » via JavaScript
Le contenu superposé « Lightbox » peut être ouverte via JavaScript avec :
$( document ).trigger( "open.wb-lbx", [ [ { src: "demo/img/1_b.jpg", type: "image" } ], false, [ "Image 1" ] ]);Code
Visualiser le code
HTML
<label for="lbx-select">Contenu superposé « Lightbox » à ouvrir</label> <select id="lbx-select"> <option value="1">Image</option> <option value="2">AJAX</option> <option value="3">Contenu incorporé</option> <option value="4">Contenu superposé modal</option> <option value="5">Galerie d'images</option> </select> <button id="lbx-open-btn" type="button">Ouvrir le contenu superposé « Lightbox »</button>JavaScript
(function( $, wb ) { "use strict"; var $document = wb.doc; $document.on( "click", "#lbx-open-btn", function( event ) { var value = $( "#lbx-select" ).val(); if ( value === "1" ) { $document.trigger( "open.wb-lbx", [ [ { src: "demo/img/1_b.jpg", type: "image" } ], false, [ "Image 1" ] ]); } else if ( value === "2" ) { $document.trigger( "open.wb-lbx", [ [ { src: "ajax/ajax1-en.html", type: "ajax" } ] ]); } else if ( value === "3" ) { $document.trigger( "open.wb-lbx", [ [ { src: "#inline_content", type: "inline" } ] ]); } else if ( value === "4" ) { $document.trigger( "open.wb-lbx", [ [ { src: "#inline_content_modal", type: "inline" } ], true ]); } else if ( value === "5" ) { $document.trigger( "wb-open.wb-lbx", [ [ { src: "demo/img/1_b.jpg", type: "image" }, { src: "demo/img/2_b.jpg", type: "image" }, { src: "demo/img/3_b.jpg", type: "image" } ], false, [ "Image 1", "Image 2", "Image 3" ] ]); } }); })( jQuery, wb );Détails de la page
- Date de modification :