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" longdesc="#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" longdesc="#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" longdesc="#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>

Titre de l'image alternative (v3.1)

Exemple

Image 1: Lorem ipsum consectetur adipiscing elit.

Image 2: Nulla mollis dolor leo. Quisque laoreet tincidunt mollis. Duis posuere scelerisque lectus quis lobortis.

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" data-title="image_1_b" />
	  </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" longdesc="#image2-desc" class="image-actual" data-title="image_2_b" />
	  </a>
    </li>
  </ul>
</div>
<p id="element_id">Titre de l'image</p>