PhotoSwipe, une galerie photo pour tablette et smartphone

12 décembre 2011

PhotoSwipe est une librairie JavaScript permettant de mettre en place une galerie d’images qui cible spécifiquement les terminaux mobiles. Elle offre aux visiteurs une interface familière et intuitive, et utilise la technique du « responsive design » pour s’adapter automatiquement à la résolution d’écran.

Une galerie « responsive design »

Très pratique pour les applications mobiles, PhotoSwipe vous permet de réaliser facilement une galerie photo qui fonctionne sur tous les formats d’écran, aussi bien sur tablette tactile que sur smartphone ! L’outil se sert des éléments d’interface d’une application native pour s’intégrer parfaitement au système de l’appareil, et ainsi avoir une interface familière et intuitive pour l’utilisateur.

Facile à intégrer, la librairie JavaScript est optimisée particulièrement pour les navigateurs Webkit. Cependant, si vous avez besoin d’un support sur les autres navigateurs mobiles, vous pouvez l’utiliser via jQuery Mobile. PotoSwipe propose plus d’une trentaine d’options pour configurer votre galerie : diaporama, zoom, légende, et bien d’autres fonctionnalités concernant la navigation des photos !

Comment l’utiliser ?

On commence par inclure la librairie PhotoSwipe.

<script type="text/javascript" src="klass.min.js"></script>
<script type="text/javascript" src="code.photoswipe-3.0.4.min.js"></script>

Puis on définit la structure HTML de votre galerie d’images.

<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>

Et enfin, l’appel de la fonction en JavaScript :

document.addEventListener('DOMContentLoaded', function(){
   var myPhotoSwipe = Code.PhotoSwipe.attach( window.document.querySelectorAll('#Gallery a'), { enableMouseWheel: false , enableKeyboard: false });
}, false);

Vous pouvez également l’appeler via jQuery de la façon suivante :

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

PhotoSwipe est compatible avec les principaux OS mobiles du marché (iOS, Android, Blackberry OS), ainsi qu’avec les frameworks de développement jQuery Mobile et PhoneGap.

Requis : (jQuery)
Démonstration : http://www.photoswipe.com/
Licence : MIT

Commentaires

  • Mimine

    Testé sur Android (Galaxy S2), excellent !

  • test

    test :)

  • The Riser

    Très bon design !

    Tester sur un PC 10.1″, y a un petit décalage entre le menu et le header !

    Bonne chance pour la suite !

  • Nickel sur WP7 :p
    je note ca dans un coin de mon cerveau.

  • jordan

    comme de la magie