Photoswipe

Published : 18 September 2016 – updated on 14 March 2025 – by Baroug, erational, Fil – 65 commentaires

1
2
3
4
5
24 Votes

Une lightbox javascript responsive.

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

Discussion

5 years 1 year 3 months Without limit
par date
Filter

29 discussions

  • 1
    Patrick

    Bonjour,
    J’utilise déjà photoswipe sur un spip 3.2.14.
    Il se déclenche bien lorsque le document est inclus dans l’article img XXX de même dans le portfolio que j’ai modifié pour ça.
    Par contre la même syntaxe en local avec spip 4.1.5 et le dernier photoswipe déclenche la médiabox, avec le même squelette.
    Je ne trouve pas où ça cloche.
    Si quelqu’un a une idée, merci.

    • patrick

      Bonjour,
      Je cherche à modifier l’affichage des légendes, je voudrais que le titre, le descriptif et le crédit s’affichent sur une seule ligne sur toute la largeur de la page, même si ça déborde de la photo.

    Reply to this message

  • 1
    tot44

    Bonjour,
    avec spip 4.0.11 album 4.0.3 photoswipe 1.10

    Je n’arrive pas à déclencher la galerie autrement que par une boucle documents.
    Est-il possible de déclencher une galerie sur un album, à l’ouverture d’une image (du plugin album) ?
    Déclarer la classe .album dans la config n’y fait rien.
    J’ai bien surchargé le modèle image également avec une correction ici.

    Merci !

    Reply to this message

  • 2
    AbsurdePhoton

    Hello,

    ce plugin est compatible avec Spip 4.0, je viens juste de le tester avec succès.

    Il suffit de modifier les versions compatibles dans paquet.xml et plugin.xml en attendant une mise à jour...

    Reply to this message

  • Bonjour

    J’ai modifié l’insertion en ajoutant
    |inserer_attribut{data-author,#CREDITS}

    Mais cela n’affiche pas l’information dans la box.

    Comment remédier à cela svp ?

    Reply to this message

  • Christophe Noisette

    Bonjour
    J’ai le code suivant dans un modèle

    <BOUCLE_flickr(DOCUMENTS){par rang_lien, num titre}{inverse #ENV{senstri, 0}}{extension==jpg|png|gif}{0,#ENV{taille,12}}{id_article?}{id_rubrique?}>
            <td> <a href="[(#FICHIER|inserer_attribut{data-photo,#URL_DOCUMENT})]">
[(#FICHIER|copie_locale|appliquer_filtre{image_smush_debrayer,force=true}|image_masque{#GET{masque}}|appliquer_filtre{image_smush_embrayer,force=true}|image_aplatir{jpg}|inserer_attribut{alt,[(#TITRE|supprimer_tags|attribut_html)]})]</a></td>
            [(#COMPTEUR_BOUCLE|Splickr_juste_a_x{#ENV{colonnes,3},</tr><tr>})] 
</BOUCLE_flickr>

    Vous pouvez voir un exemple ici :
    https://lairederien.net/887-leonard-salle-et-ses-projections-analogiques

    Donc sous le diaporama, j’ai bien mes vignettes et quand je clique dessus j’ai bien le fichier qui s’ouvre en grand MAIS je n’ai pas les flèches pour aller à la photo suivante ou précédente. Or c’est ce que j’aimerais.

    Quelqu’un peut-il m’aider?
    Merci d’avance et bonne journée
    Christophe

    Reply to this message

  • beno

    Bonjour,
    Petit bug dans le cas d’une utilisation avec le plugin Multilangue : si on ne renseigne pas la traduction du titre de l’image dans une langue secondaire, on a un petit défaut d’affichage sur texte ALT au survol de l’image (au lieu du titre, il s’affiche alors <span lang="xx">titre principal</span>).
    Par contre, pas de problème du titre lors de l’affichage du diaporama...
    Et au passage, merci encore et encore pour ce merveilleux plugin !

    Reply to this message

  • lussye

    Autre question...

    j’utilise le plugin Modèles media pour intégrer des illustrations dans un article, souvent sous forme de vignette.
    Un clic de vignette permet d’ouvrir l’image, soit façon lightbox si Mediabox est activé, sinon comme fichier image.

    Or, j’aimerais qu’elle s’ouvre avec PhotoSwipe, et je ne comprends pas comment faire... avez-vous des pistes ?
    et est-il possible selon vous que cette image intègre la boucle de toutes les images en portfolio, sans qu’elle soit répétée dans la galerie (en plus clair parce que le choix des mots me semble décisif : que les images dans le texte soient par exemple 1/17 à 6/17 dans l’affichage PhotoSwipe, en plus ou parmi celles affichées dans le portfolio, qui seraient elles numérotées de 7/17 à 17/17, sans pour autant qu’il y ait doublon dans la galerie) ?

    Merci (déjà pour l’effort de compréhension, l’expression n’est pas mon fort aujourd’hui) !

    Reply to this message

  • 1
    lussye

    Bonjour et merci pour ce superbe plugin !
    Cependant, je me heurte pour l’instant à un os, voulant sur une de mes galeries faire apparaître le descriptif, sans succès.
    Après lectures et recherches sur cette page d’aide, j’ai modifié le doc.html, copié dans squelettes/modeles, et je n’y comprends rien : même en modifiant l’affichage du titre, rien ne semble réagir...

    ex:

    <figcaption>
    [<div class='#EDIT{titre} spip_doc_titre'[ style='width:(#GET{width}|min{120px}|max{});']>(#TITRE Test)</div>]
    [<div class='#EDIT{descriptif} spip_doc_descriptif'[ style='width:(#GET{width}|min{120px}|max{});']>(#DESCRIPTIF|PtoBR)[(#NOTES|PtoBR)]</div>]
</figcaption>

    Est-ce que j’ai loupé quelque chose ? sans doute, mais quoi ? une incompatibilité ? pas de meilleur résultat en désactivant Boîte Multimédia non plus... et mes connaissances se limitent à la compréhension des squelettes, du html et du css, mais je n’ai rien vu dans ces fichiers qui semblerait expliquer mon souci.

    Auriez-vous quelques lumières pour m’éclairer ?
    L’affichage de la légende semble un truc acquis pour la plupart d’entre vous, chuis jalouse ^_^

    (la page où je souhaiterais voir apparaître les légendes : https://www.lautrecotedumiroir.net/Musiciens)

    • lussye

      Bonjour,
      donc, après plusieurs replantages de cheveux (je ne suis pas une grande pro, loin de là ^^, et tout ce qui sort du html, du css et des boucles SPIP est pour moi à peu près aussi graphique que des idéogrammes asiatiques...), une solution à proposer pour les débutants comme moi, en html/SPIP et css. Sans doute en existe-t-il de plus propres, mais bon, parfois la bricole c’est déjà ça... ^_^

      Donc, si, débutant, tu cherches juste à afficher la légende (je précise : le descriptif en plus du titre, qui lui apparaissait bien), et que les horizons infinis du .js, .php et autres boucles de programmation t’effraient...

      Pour ajouter des éléments au titre dans la légende (ici le descriptif, s’il existe), dans le fichier du squelette perso ’squelettes/inclure/documents’, remplacer la première ligne par la seconde :

      |inserer_attribut{title,#TITRE}

|inserer_attribut{title,#TITRE [| (#DESCRIPTIF)]}

      et pour en personnaliser la présentation (ici avoir le titre et le descriptif à suivre sur la même ligne), une ligne à ajouter à son css perso :

      .pswp__caption__center p {display: inline;}

      J’espère ne pas avoir dit trop de bêtises, pour moi ça marche, mais toute correction ou précision est bien sûr bienvenue !! :)

    Reply to this message

  • Ajel

    Bonjour,

    C’est jolie ce que Photoswipe fait. Je l’ai installé mais ça ne fonctionne pas. Est ce qu’il y a plus de détail sur l’installation SVP? je suis spip 3.2. Merci.

    Reply to this message

  • 1
    LAURENT Jacky

    Bonjour.
    Est-il possible d’utiliser ce plugin dans les squelettes d’articles, dans lesquels les images sont insérées dans les textes avec les balises du genre “img001|center” ?
    Merci de votre réponse, que j’espère positive sans trop y croire...

    Reply to this message

Add a comment

Avant de faire part d’un problème sur un plugin X, merci de lire ce qui suit :

  • Désactiver tous les plugins que vous ne voulez pas tester afin de vous assurer que le bug vient bien du plugin X. Cela vous évitera d’écrire sur le forum d’une contribution qui n’est finalement pas en cause.
  • Cherchez et notez les numéros de version de tout ce qui est en place au moment du test :
    • version de SPIP, en bas de la partie privée
    • version du plugin testé et des éventuels plugins nécessités
    • version de PHP (exec=info en partie privée)
    • version de MySQL / SQLite
  • Si votre problème concerne la partie publique de votre site, donnez une URL où le bug est visible, pour que les gens puissent voir par eux-mêmes.
  • En cas de page blanche, merci d’activer l’affichage des erreurs, et d’indiquer ensuite l’erreur qui apparaît.

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.

Who are you?
[Log in]

To show your avatar with your message, register it first on gravatar.com (free et painless) and don’t forget to indicate your Email addresse here.

Enter your comment here

This form accepts SPIP shortcuts {{bold}} {italic} -*list [text->url] <quote> <code> and HTML code <q> <del> <ins>. To create paragraphs, just leave empty lines.

Add a document

Follow the comments: RSS 2.0 | Atom