LightGallery, une lightbox responsive avec galerie d’images

LightGallery est un plugin jQuery qui permet de mettre en place une lightbox opaque, fullscreen et responsive avec galerie d’images et vidéos intégrée, le tout compatible sur tablette et smartphone.

Lightbox et galerie photo intégrée

La particularité de cette lightbox est d’embarquer une galerie photo / vidéo avec support tactile (« swipe ») pour les appareils mobiles : une fois la photo ouverte dans la lightbox, on retrouve des flêches de navigation pour passer d’une slide à l’autre et un bouton pour afficher la liste des miniatures. Des transitions CSS sont utilisées avec un fallback JS pour les anciens navigateurs.

LightGallery propose une interface similaire au plugin Swipebox mais avec une configuration beaucoup plus complète. En effet, le script met à disposition plus d’une vingtaine d’options et de fonctions de callback pour personnaliser votre lightbox, ainsi qu’une feuille de style facilement customisable. Côté vidéo, le support de Youtube et Vimeo est assuré.

gallery_jquery

Les paramètres disponibles permettent de définir le type et la vitesse d’animation (fade ou slide), la durée entre chaque slide, ou encore l’activation du mode slideshow automatique. À noter tout de même l’absence d’une option pour configurer l’ouverture de la lightbox qui, elle, ne s’affiche sans aucune animation. En revanche, une option intéressante pour gérer indépendamment vos photos et leurs miniatures via un attribut data-* est présente.

Comment utiliser lightGallery ?

Commençons par inclure le framework jQuery et les fichiers du plugin, le script et la feuille de style, dans la balise head du document.

<link type="text/css" rel="stylesheet" href="css/lightGallery.css" />
<script src="js/jquery.min.js"></script>
<script src="js/lightGallery.min.js"></script>

Il faut ensuite définir la structure HTML, c’est-à-dire une liste à puces non ordonnée contenant les miniatures, avec un ID CSS pour le sélecteur jQuery. Le chemin des photos en taille originale doit être défini dans l’attribut data-src dans chaque puce.

<ul id="lightGallery">
   <li data-src="img/img1.jpg">
      <img src="img/thumb1.jpg" />
   </li>
   <li data-src="img/img2.jpg">
      <img src="img/thumb2.jpg" />
   </li>
</ul>

On termine par l’appel de lightGallery sur notre liste à puces, ici sans paramètre. Et voilà, c’est terminé.

$(document).ready(function() {
   $("#lightGallery").lightGallery(); 
});

LightGallery est donc un plugin jQuery qui permet de mettre en place une lightbox avec galerie d’images très rapidement, et qui s’adapte en fonction de la taille d’écran, mais vous pouvez aller plus loin en personnalisant le comportement de votre lightbox avec les nombreux paramètres disponibles, ou en apportant des modifications sur la feuille de style. À vous de jouer !

Requis : jQuery
Support : Chrome, Firefox, Opera, Safari, IE7+, Android, iOS, Windows Phone
Démonstration : http://sachinchoolur.github.io/lightGallery/
GitHub : https://github.com/sachinchoolur/lightGallery
Licence : Apache

Commentaires

  • MCMXCI Rémi

    Merci, mais quand est-il lorsqu’on l’utilise plus simplement pour une image et non pas une galerie ?

    • Fonctionne comme une lightbox classique.