Swipebox, une lightbox jQuery fullscreen et tactile

Swipebox est un plugin jQuery permettant de réaliser une superbe ligthbox fullscreen faisant également office de galerie d’images, compatible sur tablette et smartphone grâce à la technique du « swipe », méthode qui consite à faire glisser son doigt pour passer d’une slide à une autre.

Lightbox et galerie photo intégrée

Swipebox s’inscrit dans la modernité avec un affichage plein écran, responsive et tactile pour profiter au maximum de vos photos. Le plugin met en avant 5 caractéristiques principales : le support des mouvements tactiles (« swipe », « tap »), la navigation au clavier via les flêches directionnelles, les transitions CSS3 avec un fallback jQuery pour les anciens navigateurs, le support des écrans Retina pour les icônes UI, et la personnalisation aisée en modifiant la feuille de style.

swipebox_demo

L’animation entre les photos est unique ; il s’agit d’un effet de type « slide », effet qu’on retrouve sur la plupart des applications mobiles. La barre de navigation, ainsi que la légende de la photo, apparaissent dès lors que la lightbox est ouverte puis disparaissent après quelques secondes. Pour les ré-afficher à l’écran, il faut alors cliquer ou taper avec le doigt (« tap ») dans la lightbox.

Seule ombre au tableau, la pauvreté du nombre de paramètres avec seulement 2 options disponibles :

  • useCSS : booléen qui permet de forcer l’utilisation de jQuery au lieu de CSS pour générer les transitions (true par défaut). Avec la valeur true, jQuery prend quand même la main sur les navigateurs qui ne supportent pas les transitions CSS3.
  • hideBarsDelay : entier en milliseconde qui définit la durée pendant laquelle la barre de navigation reste affichée (3000 par défaut). La valeur 0 force l’affichage de la barre en permanence.

Mise en place de Swipebox

On commence par inclure le framework jQuery et le plugin Swipebox, c’est-à-dire le fichier JS swipebox.min.js ainsi que la feuille de style swipebox.css :

<script src="js/jquery-1.9.0.js"></script>
<script src="js/jquery.swipebox.min.js"></script>
<link rel="stylesheet" href="css/swipebox.css">

Ensuite on définit notre structure HTML ; une petite image entourée d’un lien hypertexte qui pointe sur l’image originale. Ne pas oublier de définir une classe CSS sur le lien (ici « swipebox »), c’est ce qui va nous permettre de construire le sélécteur jQuery pour appeler Swipebox.

<a href="big/image.jpg" class="swipebox" title="My Caption">
   <img src="small/image.jpg" alt="image">
</a>

Et enfin, on termine par l’appel de Swipebox sur notre lien, et votre lightbox apparaitra en plein écran au clic sur la petite image :

jQuery(function($) {
   $(".swipebox").swipebox();
});

Si vous définissez un seul lien, la lightbox ne fera pas apparaitre les flêches de navigation étant donné que vous n’avez qu’une seule image à montrer. Cependant, si vous souhaitez avoir une galerie photo sur le clic d’une seule image, il existe une petite astuce : il vous suffit de définir plusieurs liens, les mettre tous en display:none sauf celui que vous souhaitez montrer. Ainsi, vous aurez une petite image qui, au clic, ouvrira une lightbox avec galerie photo :

<a href="big/image1.jpg" class="swipebox" title="My Caption">
   <img src="small/image1.jpg" alt="image">
</a>
<a href="big/image2.jpg" class="swipebox" title="My Caption" style="display:none;">
   <img src="small/image2.jpg" alt="image">
</a>
<a href="big/image3.jpg" class="swipebox" title="My Caption" style="display:none;">
   <img src="small/image3.jpg" alt="image">
</a>

Pour conclure, Swipebox est un plugin jQuery idéal pour mettre en place une lightbox rapidement, sans avoir besoin d’une configuration très poussée. Le script se contente du minimum pour un résultat de qualité, de quoi rendre vos sites encore plus adaptés aux tablettes et smartphones.

Requis : jQuery
Compatibilité : Chrome, Safari, Firefox, Opera, IE8+, IOS4+, Android, Windows Phone
Démonstration : http://brutaldesign.github.com/swipebox/
Licence : MIT

Commentaires