Lightbox

Aperçu

Responsable de projet : Eric Poirier (@ericpoirier)

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.

Mise en oeuvre

Chaque groupe de galerie de photos et des éléments seul doivent être à l'intérieur de son propre <div> en utilisant la classe wet-boew-lightbox. Aussi, chaque <img> éléments doivent être à l'intérieur de leur propre <a>.

Exemple :

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

Remarque : La classe lb-item est utilisé ici comme exemple. Ci-dessous sont les options pour mettre en œuvre le Lightbox.

Options

É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

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>

Exemples

Développement

Lightbox est dépendent sur ColorBox (licence MIT).

Le code pour Lightbox se trouve dans plusiers endroit dans le dossier source de la BOEW :

js/workers/lightbox.js - contains le code JavaScript pour Lightbox
js/sass/includes/_lightbox.scss - contient le CSS pour Lightbox
js/images/lightbox - contient les images pour Lightbox
js/dependencies/colorbox.js - fichier script pour ColorBox

Problèmes connus

Aucun problèmes connus pour le moment.

Historique des versions

Références

ColorBox