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});
});
[/sourcecode]
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>
[/sourcecode]
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.
Connaissez-vous d’autres extensions à jQuery Mobile permettant de mettre en place une galerie d’images ?
