PhotoSwipe, la galerie d’images manquante de jQuery Mobile

par Florent Suc le 8 septembre, 2011 dans Développement, Mobile, Outils - Conseils avec 1 commentaire et vu 2435 fois

Après plusieurs tentatives de création d’un carrousel sous jQuery Mobile, je me suis résigné à chercher un plug-in. Je suis tombé par hasard sur PhotoSwipe, un plugin qui vient combler le manque de ce Framework web mobile.

Ce plug-in a été développé gratuitement par CodeComputerLove.

Présentation de PhotoSwipe

Actuellement, Photoswipe est disponible en version 2.1 et il fonctionne avec la dernière version de jQuery Mobile, c’est-à-dire la bêta 2.

Plutôt que de réaliser une galerie d’images afin de présenter PhotoSwipe, je vous propose de regarder la vidéo suivante :

Comme vous l’avez constaté, Photoswipe propose une interface très soignée, gérant à la fois les mobiles, les tablettes et les navigateurs de bureau.

Fonctionnement du plug-in

Son intégration est très simple. Vous aurez d’une part à intégrer la librairie dans votre code de la manière suivante :

//jQuery version
$(document).ready(
     function(){
          var myPhotoSwipe = $("#Gallery a").photoSwipe({enableMouseWheel: false , enableKeyboard: false});
});

Sachez qu’un grand nombre d’options est disponible sur le site de Photoswipe. Il est par exemple possible d’autoriser ou d’interdire le zoom, le support du clavier, etc.

Il vous restera simplement à créer une liste Gallery dans votre code HTML, puis d’y insérer les images de cette façon :

<ul id="Gallery">
     <li><a href="images/full/01.jpg"><img src="images/thumb/01.jpg" alt="Image 01" /></a></li>
     <li><a href="images/full/02.jpg"><img src="images/thumb/02.jpg" alt="Image 02" /></a></li>
     <li><a href="images/full/03.jpg"><img src="images/thumb/03.jpg" alt="Image 03" /></a></li>
     <li><a href="images/full/04.jpg"><img src="images/thumb/04.jpg" alt="Image 04" /></a></li>
     <li><a href="images/full/05.jpg"><img src="images/thumb/05.jpg" alt="Image 05" /></a></li>
     <li><a href="images/full/06.jpg"><img src="images/thumb/06.jpg" alt="Image 06" /></a></li>
</ul>

Vous trouverez plusieurs exemples d’utilisation de PhotoSwipe dans l’archive du plugin.

Conclusion

Personnellement, j’espère que jQuery Mobile prendra en compte ce plugin dans la prochaine version de son framework, ou développera une alternative.

Download Télécharger les fichiers

Connaissez-vous d’autres extensions à jQuery Mobile permettant de mettre en place une galerie d’images ?

Tags : carrousel, galerie, jQuery Mobile, mobile,

Pour en savoir plus sur l'auteur de cet article... Actuellement étudiant en MIAGE (Méthodes Informatiques Appliquées à la Gestion des Entreprises) à Toulouse, je suis avant tout passionné de technologies web, et notamment des solutions mobiles. Je suis par ailleurs un inconditionnel des sports de glisses, et vous aurez des chances de me croiser dans les Pyrénées ;) En savoir plus sur cet auteur...