Lightbox

Table des matières

Caractéristiques

  • Affiche les images dans l'outil ColorBox
  • Utilisation d'un souris, écran tactile ou clavier pour une navigation facile.

Exemples

  1. liste ordonnée (ol) premier niveau - apparence par défaut
  2. liste ordonnée (ol) premier niveau - apparence par défaut
    1. liste ordonnée (ol) deuxième niveau - apparence par défaut
    2. liste ordonnée (ol) deuxième niveau - apparence par défaut
      1. liste ordonnée (ol) troisième niveau - apparence par défaut
      2. liste ordonnée (ol) troisième niveau - apparence par défaut

Link default appearance

Description longue d'image 2

Exemple d'une description longue d'image 2 (référencé par aria-describedby).

Images seules

Exemple

Codage

<div class="wet-boew-lightbox">
  <ul>
    <li>
      <a class="lb-item" href="images/1_b.jpg" title="Image 1">
        <img src="images/1_s.jpg" alt="Image 1" class="image-actual" />
      </a>
    </li>
    <li>
      <a class="lb-item" href="images/2_b.jpg" title="Image 2">
        <img src="images/2_s.jpg" alt="Image 2" aria-describedby="image2-desc" class="image-actual" />
      </a>
    </li>
    <li>
      <a class="lb-itemquot; title="Exemple de contenu AJAX" href="ajax/ajax-fr.html">Contenu AJAX</a>
    </li>
    <li>
      <a class="lb-item" title="Exemple de contenu incorporé" href="#inline_content">Contenu incorporé</a>
    </li>
  </ul>
</div>

Galerie d'articles

Exemple

Codage

<div class="wet-boew-lightbox">
  <ul class="lb-gallery">
	<li>
	  <a class="lb-item-gal" href="images/1_b.jpg" title="Image 1">
		<img src="images/1_s.jpg" alt="Image 1" class="image-actual" />
	  </a>
	</li>
	<li>
	  <a class="lb-item-gal" href="images/2_b.jpg" title="Image 2">
		<img src="images/2_s.jpg" alt="Image 2" aria-describedby="image2-desc" class="image-actual" />
	  </a>
	</li>
	<li>
	  <a class="lb-item-gal" title="Exemple de contenu AJAX" href="ajax/ajax-fr.html">Contenu AJAX</a>
	</li>
	<li>
	  <a class="lb-item-gal" title="Exemple de contenu incorporé" href="#inline_content">Contenu incorporé</a>
	</li>
  </ul>
</div>

Galeries d'articles cachés

Exemple

Codage

<div class="wet-boew-lightbox">
  <ul class="lb-hidden-gallery">
	<li>
	  <a class="lb-item-gal" href="images/1_b.jpg" title="Image 1">
		<img src="images/1_s.jpg" alt="Image 1" class="image-actual" />
	  </a>
	</li>
	<li>
	  <a class="lb-item-gal" href="images/2_b.jpg" title="Image 2">
		<img src="images/2_s.jpg" alt="Image 2" aria-describedby="image2-desc" class="image-actual" />
	  </a>
	</li>
	<li>
	  <a class="lb-item-gal" title="Exemple de contenu AJAX" href="ajax/ajax-fr.html">Contenu AJAX</a>
	</li>
	<li>
	  <a class="lb-item-gal" title="Exemple de contenu incorporé" href="#inline_content">Contenu incorporé</a>
	</li>
  </ul>
</div>