ZoomGallery : un zoom responsive pour votre site web

Un court billet pour vous parler d'une petite lib JS sur laquelle j'ai travaillé : ZoomGallery. Cette bibliothèque JavaScript permet de proposer à vos visiteurs un zoom qui s'adapte à tous les écrans (ordinateur, tablette et mobile). J'ai fait le choix de GitHub pour mon projet. Vous pouvez donc télécharger ZoomGallery sur ce dernier. Je vous invite aussi à regarder la démo.

Pourquoi une nouvelle bibliothèque de zoom alors qu'il en existe des centaines ?

Pour répondre à cette question il faut reprendre l'historique de ce projet. Dans un de mes projets web, j'ai dû reprendre une bibliothèque nommée ZoomImage. Cette dernière n'étant plus maintenue depuis 2007 elle n'est naturellement plus compatible avec les versions les plus récentes de jQuery. Je suis donc partie à la recherche d'une bibliothèque similaire. À mon grand désespoir, je n'ai rien trouvé d'équivalent. J'ai donc fait le choix de développer un plugin jQuery similaire à ZoomImage, tout en étant plus adapté au monde d'aujourd'hui : le mobile. Ce plugin n'est encore qu'au stade expérimental et il y'a encore des améliorations à fournir, notamment pour les mobiles.

Comment cela fonctionne

Pour utiliser ZoomGallery il faut naturellement inclure jquery et optionnellement hammer.js une bibliothèque pour les mobiles. Il faut aussi inclure zoomgallery.css et zoomgallery.js Après quoi quelques lignes de jquery seront nécessaires pour dire quelles éléments seront "zoomable". Voici un exemple :

  1. <html>
  2. <head>
  3. <link rel="stylesheet" href="zoomgallery.css" type="text/css" />
  4. <script type="text/javascript" src="jquery.js"></script>
  5. <script type="text/javascript" src="zoomgallery.js"></script>
  6. <script type="text/javascript">
  7. $(document).ready(function() {
  8. $('.zoomgallery').zoomgallery();
  9. });
  10. </script>
  11. </head>
  12. <body>
  13. <a href="gallery/img1.jpg" class="zoomgallery">
  14. <img src="thumbnail/img1.jpg" title="Image description" />
  15. </a>
  16. </body>
  17. </html>

Sur quel navigateur fonctionne ZoomGallery ?

ZoomGallery utilise la puissance du CSS3 pour l’ensemble de ces animations. Il est donc nécessaire de posséder un navigateur ressent pour profiter de ces dernières. Oubliez donc la compatibilité complète pour IE inférieur à IE10. Malgré tout, elle peut être utilisée sans animation à partir d'IE7. Ce plugin est parfaitement compatible avec Firefox et Chrome (version PC et Android). Je n'ai pas pu tester sous Opera et Safari.

 

Ajouter un commentaire

Le code HTML est affiché comme du texte et les adresses web sont automatiquement transformées.

À propos

Photographie

Maxence de Flotte

Développeur cœur PrestaShop

Passionné de nouvelles technologies

PHP, HTML5/CSS3, jQuery, Bootstrap, LESS CSS, ...

Voir mon CV

Mes projets