Lightbox

Objet

• Affiche les images et autres contenus en utilisant le plugin ColorBox.
• Navigation facile dans des galeries d'images à l'aide de la souris, un écran tactile ou d'un clavier.

Éléments seul

Pour mettre en œuvre Lightbox à une seule image/photo sur votre page, vous devez utiliser la classe lb-item sur les éléments <a>.

<div class="wet-boew-lightbox">
  <a class="lb-item" href="images/image_source.jpg" title="Texte alternatif pour l'image">
    <img src="images/image_source.jpg" alt="Texte alternatif pour l'image" class="image-actual" />
  </a>
</div>

Exemple

Gallerie de photos

Pour mettre en œuvre Lightbox à un groupe d'images ou de photos sur votre page, vous devez utiliser la classe lb-item-gal sur l'élément <a> ainsi que la classe lb-gallery sur l'élément <ul> :

<div class="wet-boew-lightbox">
  <ul class="lb-gallery">
    <li>
      <a class="lb-item-gal" href="images/image_source.jpg" title="Texte alternatif pour l'image">
        <img src="images/image_source.jpg" alt="Texte alternatif pour l'image" class="image-actual" />
      </a>
    </li>
    <li>...</li>
    <li>...</li>
  </ul>
</div>

Exemple

Gallerie de photos cachée

Pour mettre en œuvre Lightbox à un groupe d'images ou de photos cachées sur votre page vous devez utiliser la classe lb-item-gal sur l'élément <a> ainsi que la classe lb-gallery-hidden sur l'élément <ul> :

<div class="wet-boew-lightbox">
  <ul class="lb-gallery-hidden">
    <li>
      <a class="lb-item-gal" href="images/image_source.jpg" title="Texte alternatif pour l'image">
        <img src="images/image_source.jpg" alt="Texte alternatif pour l'image" class="image-actual" />
      </a>
    </li>
    <li>...</li>
    <li>...</li>
  </ul>
</div>

Exemple

Titre de l'image alternative

Pour mettre en oeuvre un titre d'image alternative pour Lightbox, utilisez l'attribut de lien data-title pour spécifier l'element de la page par son ID :

<div class="wet-boew-lightbox">
  <a class="lb-item" href="images/image_source.jpg" title="Texte alternatif pour l'image" data-title="element_id">
    <img src="images/image_source.jpg" alt="Texte alternatif pour l'image" class="image-actual" />
  </a>
</div>
<p id="element_id">Titre de l'image alternative</p>

Exemple

Forcer un lien de photo

Vous pouvez forcer un lien de photo en ajoutant la classe force-photo à l'élément div qui contient wet-boew-lightbox. Utilisez cette fonction lorsque la détection automatique des photos échoue (p.ex., un url comme photo.php ou &photo=1234 au lieu de photo.jpg)

Exemple :

<div class="wet-boew-lightbox force-photo">
  <a class="lb-item" href="photo.php" title="Texte alternatif pour l'image">
    <img src="image/image_source.jpg" alt="Texte alternatif pour l'image">
  </a>
</div>