Lightbox
Table des matières
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
Exemple
Visualiser le code
<ul>
<li>
<a class="wb-lbx" href="demo/1_b.jpg" title="Image 1">
<img src="demo/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>
<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">
<ol>
<li>liste ordonnée (<code>ol</code>) premier niveau - apparence par défaut</li>
<li>liste ordonnée (<code>ol</code>) premier niveau - apparence par défaut
<ol>
<li>liste ordonnée (<code>ol</code>) deuxième niveau - apparence par défaut</li>
<li>liste ordonnée (<code>ol</code>) deuxième niveau - apparence par défaut
<ol>
<li>liste ordonnée (<code>ol</code>) troisième niveau - apparence par défaut</li>
<li>liste ordonnée (<code>ol</code>) troisième niveau - apparence par défaut</li>
</ol>
</li>
</ol>
</li>
</ol>
<p><a href="#">Lien - apparence par défaut</a></p>
</div>
</section>
</div>
</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">
<ol>
<li>liste ordonnée (<code>ol</code>) premier niveau - apparence par défaut</li>
<li>liste ordonnée (<code>ol</code>) premier niveau - apparence par défaut
<ol>
<li>liste ordonnée (<code>ol</code>) deuxième niveau - apparence par défaut</li>
<li>liste ordonnée (<code>ol</code>) deuxième niveau - apparence par défaut
<ol>
<li>liste ordonnée (<code>ol</code>) troisième niveau - apparence par défaut</li>
<li>liste ordonnée (<code>ol</code>) troisième niveau - apparence par défaut</li>
</ol>
</li>
</ol>
</li>
</ol>
<button class="btn btn-primary popup-modal-dismiss">Fermer le contenu superposé modal</button>
</div>
</section>
</div>
</li>
</ul>Galeries
Exemples
Galerie d'images
Galerie d'AJAX
Visualier le code
<section class="wb-lbx lbx-gal inline-lst">
<h5>Galerie d'images</h5>
<ul>
<li>
<a href="demo/1_b.jpg" title="Image 1">
<img src="demo/1_s.jpg" alt="Image 1" />
</a>
</li>
<li>
<a href="demo/2_b.jpg" title="Image 2">
<img src="demo/2_s.jpg" alt="Image 2" aria-describedby="image2-desc" longdesc="#image2-desc" />
</a>
</li>
<li>
<a href="demo/3_b.jpg" title="Image 3">
<img src="demo/3_s.jpg" alt="Image 3" />
</a>
</li>
<li>
<a href="demo/4_b.jpg" title="Image 4">
<img src="demo/4_s.jpg" alt="Image 4" />
</a>
</li>
</ul>
</section>
<section class="wb-lbx lbx-gal inline-lst">
<h5>Galerie d'AJAX</h5>
<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
Exemples
Visualiser le code
<section class="wb-lbx lbx-hide-gal">
<h5>Galerie d'images</h5>
<ul>
<li>
<a href="demo/1_b.jpg" title="Image 1">
<img src="demo/1_s.jpg" alt="Image 1" />
</a>
</li>
<li>
<a href="demo/2_b.jpg" title="Image 2">
<img src="demo/2_s.jpg" alt="Image 2" aria-describedby="image2-desc" longdesc="#image2-desc" />
</a>
</li>
<li>
<a href="demo/3_b.jpg" title="Image 3">
<img src="demo/3_s.jpg" alt="Image 3" />
</a>
</li>
<li>
<a href="demo/4_b.jpg" title="Image 4">
<img src="demo/4_s.jpg" alt="Image 4" />
</a>
</li>
</ul>
</section>
<section class="wb-lbx lbx-hide-gal">
<h5>Galerie d'AJAX</h5>
<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>Titre de l'image alternative
Example
Image 1 : Lorem ipsum consectetur adipiscing elit.
Image 2 : Nulla mollis dolor leo. Quisque laoreet tincidunt mollis. Duis posuere scelerisque lectus quis lobortis.
Visualiser le code
<div class="wb-lbx lbx-gal inline-lst">
<ul>
<li>
<a href="demo/1_b.jpg" title="Image 1" data-title="image_1_b">
<img src="demo/1_s.jpg" alt="Image 1" />
</a>
</li>
<li>
<a href="demo/2_b.jpg" title="Image 2" data-title="image_2_b">
<img src="demo/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>