-
Notifications
You must be signed in to change notification settings - Fork 0
Lightbox
Lightbox est un plugiciel jQuery qui vous aide à construire galerie de photos à partir de photos sur une page Web.
- Affiche les images et autres contenus en utilisant le plugin ColorBox (http://www.jacklmoore.com/colorbox).
- Navigation facile dans des galeries d'images à l'aide de la souris, un écran tactile ou d'un clavier.
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.
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>
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>
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>
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
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')
Example:
<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>
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
Aucun problèmes connus pour le moment.