Fermer
DéveloppementMobileOutils - Conseils

PhotoSwipe, la galerie d’images manquante de jQuery Mobile

Le MateBook X Pro (2020) de Huawei booste les performances

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 :

[sourcecode language=”javascript”]
//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 :

[sourcecode language=”html”]
<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 ?

Mots-clé : carrouselgaleriejQuery Mobile
Florent Suc

L’auteur Florent Suc

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 😉