Accueil du site > Code > PhotoSwipe

PhotoSwipe

dimanche 8 mai 2016, par Guillaume

PhotoSwipe est une boîte multimédia — comme la Mediabox installée en série avec SPIP — qui permet de zoomer à la taille réelle des images et qui gère intelligemment les légendes. Le plugin est basé sur la librairie jquery éponyme.

Comme la plupart des « box » multimedia, PhotoSwipe permet, lorsqu’on clique sur une image, de l’agrandir dans tout l’espace disponible de la fenêtre. Ce système désormais omniprésent trouve ses limites quand il s’agit d’afficher une image très large ou très haute, ou encore très complexe : elle reste alors difficilement lisible. PhotoSwipe résous le problème très simplement : un second clic affiche l’image à 100 %.

JPEG - 274 ko
Ceci est un bord de mer au Portugal
À Melides plus exactement. N’est-ce pas enchanteur ?

Le plugin gère aussi efficacement les légendes, y compris les très longues ; elles s’affichent en surimpression sur l’image au second clic.

Si la plupart des « box » sont faciles à utiliser, PhotoSwipe est un peu plus exigeant. Pas seulement à cause de ses avantages, mais aussi parce qu’il est très ouvert et permet un grand nombre de configuration. Ce portage en plugin SPIP est assez rudimentaire * précision sur comment surcharger*.

JPEG - 310.6 ko
Le même bord de mer mais vu de plus loin
Au même endroit du coup. Avec la lagune.

Le plugin impose un balisage spécifique des images, même s’il est parfaitement standard. Il faut leur ajouter trois attributs : l’url de l’image à 100%, sa largeur et sa hauteur. Par défaut, et nous avons conservé cette syntaxe, ils se nomment respectivement data-photo, data-photo-w et data-photo-h. Deux modèles doc et deux portfolios (pour afficher des galeries d’images) sont fournis avec le plugin pour simplifier le processus ; les premiers sont des versions à peine modifiées de celles fournies avec SPIP, les seconds, conçus pour les sites utilisant la norme HTML5, utilisent les balises <figure> et <caption>. Pour étendre le plugin à d’autres usages, il peut être utile de se référer à leurs codes.

JPEG - 501.1 ko
Ceci est une rue à Evora
Une autre ville Portugaise, où il fait excessivement chaud

PhotoSwipe gère très intelligemment les images mais n’est pas adapté à l’affichage d’autres médias, ou d’autres boites modales : Mediabox sera plus adapté à ces usages.