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.
Exemple d’utilisation sur le site du Monde Diplomatique
Consulter le site du projet PhotoSwipe et sa documentation
http://photoswipe.com/
Présentation
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ésoud le problème très simplement : un second clic affiche l’image à 100 %.
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.
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
- data-photo-h
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. D’ailleurs il est possible de faire cohabiter les deux sur un même site.
Installation
Après activation du plugin, dans le panel de configuration, vous pouvez choisir quelle expression HTML déclenchera la galerie PhotoSwipe.
Par défaut, le sélecteur est img[data-photo], a[type]
Une page démo permet de tester le plugin
spip.php?page=public/demo_photoswipe
Voici le code principal
<div class="demo">
<BOUCLE_galerie(DOCUMENTS){extension=jpg}{!par date}{0,5}{largeur>400}{statut in prop,publie}>
<a href="#URL_DOCUMENT" onclick="return false;">
[(#FICHIER|image_reduire{400,0}
|inserer_attribut{data-photo,#URL_DOCUMENT}
|inserer_attribut{data-photo-h,#HAUTEUR}
|inserer_attribut{data-photo-w,#LARGEUR}
|inserer_attribut{alt,#TITRE}
|inserer_attribut{title,#TITRE}
)]
</a>
</BOUCLE_galerie>
</div>
La page liste donc les dernières images .jpg du site qui ont de plus 400 pixels de large.
On crée des vignettes des images sur lesquelles, on ajoute les attributs suivants pour créer la galerie photoswipe :
data-photo | URL de la photo en grande résolution |
data-photo-h | Hauteur de la photo |
data-photo-w | Largeur de la photo |
data-photo-title | Titre de la photo |
Utilisation avec des images dont on ignore les dimensions
Depuis la version 0.5.0, il est possible d’utiliser le plugin sur des images dont on ignore les dimensions. Cela peut s’avérer utile quand on souhaite afficher des images distantes par exemple. Pour cela, il faut poser les attributs nécessaires au plugin sur le lien englobant la vignette de l’image, et passer la valeur 0 pour la largeur et la hauteur, exemple :
#SET{distant,https://www.geodiversite.net/IMG/jpg/img_4560-1600x1067.jpg}
[<a href="#GET{distant}" data-photo="#GET{distant}" data-photo-h="0" data-photo-w="0" type="image/jpeg">
(#GET{distant}|image_reduire{0,200})
</a>]
Aucune discussion
Ajouter un commentaire
Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :
Merci d’avance pour les personnes qui vous aideront !
Par ailleurs, n’oubliez pas que les contributeurs et contributrices ont une vie en dehors de SPIP.
Suivre les commentaires : |