Photoswipe

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

updated on 6 April 2020

Discussion

24 discussions

  • 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

  • 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

    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)

    • 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

  • 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

  • 1

    Bonjour,
    J’utilise photoswipe depuis quelques temps déjà, et l’ai adapté à mes besoins.
    Comment le déclencher comme ici avec la mediabox?

    <a href="#VALEUR" class='mediabox' type="#MIME_TYPE" rel="#ENV{dir}">(#VALEUR|image_passe_partout{250,250} |image_recadre{250,250,-,focus-center}|inserer_attribut{title,#VALEUR|basename})</a>

    Par quoi remplacer

    class='mediabox'

    pour lancer le plugin?

    • Toujours pas d’idée à propos de cette question?
      Je précise que j’utilise déjà photswipe pour mon portfolio, et que ça marche (il y a plusieurs liens sur cette page).
      Pour toute réponse, merci

    Reply to this message

  • Bonjour,
    J’utilise ce plugin depuis quelque temps avec bonheur.
    J’ai voulu tester en même temps le plugin “cibloc”.
    J’ai constaté alors un décalage des photos sur la gauche, avec déformation, lors du zoom.
    Une fois le plugin “cibloc” désactivé, tout est rentré dans l’ordre.
    Je voulais signaler le fait ici pour information.
    Encore merci pour ce plugin.

    Reply to this message

  • 3

    Bonjour et merci pour ce chouette plugin,

    Spip 3.2.1, Photoswipe 0.4.0

    Sur un site en dev. local, il marche très bien pour l’affichage en galerie des images en portfolio (vu=non) (surcharge de documents.html) mais il ne fonctionne pas sur les images placées dans le texte selon le modele <docXXX|left>... Il n’y a rien, il n’est pas pris en compte..

    La Boîte Multimedia est “désactivée sur le site public”, je n’ai plus de surcharges actives (squelettes/modeles/) des fichiers ’doc.html’, ’image.html’ ou ’img.html’...
    Je ne comprends pas.. je cherche, cherche mais sans trouver...

    Il marchait bien ceci dit lorsque j’avais surchargé le ’doc.html’ de la dist (avant de chercher à utiliser le fichier du plugin) en injectant les attributs nécessaires à photoswipe dans la balise img. Mais j’avais alors le problème qu’un clic sur une vignette d’article déclenchait une galerie des images du site ! (il s’agit en effet d’un site utilisant fullpage.js donc avec une architecture en sections et slides chargés). Il n’y a donc pas de conflit avec Fullpage et le fonctionnement spip n’est pas modifié... alors pige pô...)

    Pourriez-vous me donner un coup de main ?
    Merci !

    • Bonjour,
      Chez moi, ici, le camion a été placé en docxxx dans le texte et embarque la galerie du portfolio.

      http://imagesetpeche.free.fr/?Surf-Trip-Espagne

      Même chose avec imgxxx

    • Bonjour,
      Un petit ’up’ .. car je galère et que j’aimerais bien que cela fonctionne...

      Donc Photoswipe marche pour les images du portfolio mais pas pour les images utilisant le modèle <docXXX>, que ce soit avec ou sans surcharge du doc.html :

      -  sans surcharge (donc rien dans mon squelettes/modeles), aucune data du plugin n’est insérée dans la balise <img />... située dans un <dl><dt> comme d’hab.

      -  avec surcharge, en essayant diverses choses, aussi bien à partir des fichiers doc _standard ou _figure :
      puisque le simple placement d’un doc.html du plugin dans mon dossier modeles produis en effet des erreurs, j’ai suivi la méthode fournie (baroug.net/Plugin-multimedia-et-modele-doc). Cela supprime bien le conflit mais alors un certain nombre de valeurs deviennent inaccessibles : les variables ’vraielargeur’ et ’vraiehauteur’, #TITRE, #DESCRIPTIF et #CREDIT sont VIDES (mais pourquoi...?)
      J’ai cherché.. essayé même de récolter/charger les variables dans une pré-boucle mais ça remet le système en erreur...

      Une piste ?..
      Merci

    • Pour apporter une pierre, il semble effectivement que le plugin desactive en quelque sorte l’affiche des “images” si on les intègre dans un modèle au lieu d’un modèle <imgxxx>. Je viens de faire le test (sans aucun réglage après l’installation du plugin Photoswipe) et effectivement, lorsque pour un pdf (associé à son icône, donc une “pseudo-image”) j’inscris <docxxx> j’ai bien l’icône habituelle attendue et cliquable sur le fichier pdf. Si par contre j’utilise <imgxxx> (avec le même n° ID document) là rien ne s’affiche, alors qu’auparavant j’avais, en ayant installé un autre plugin (image responsive/media responsive), l’affichage de l’icône ET de la légende attribuée au fichier pdf. En somme, il faut réserver l’usage de <docxxx> aux fichiers qui ne sont pas des images, et utiliser systématiquement <imgxxx> pour tous les fichiers image. Ce plugin est vraiment très bien, et fonctionne sans encombre en association avec image responsive/media responsive (si l’image est grande, affichage dans la boîte Photoswipe avec 2e clic pour accéder à la taille maximale, et si l’image est plus petite, affichage dans la boîte Image responsive (“media”) avec sa légende comme habituellement ; s’il y a plusieurs images dans l’article (ou la rubrique), affichage des autres images dans la même boîte Photoswipe façon galerie). Merci pour la diffusion.

    Reply to this message

  • 2

    Bonjour,
    Je viens de consulter la page du Monde Diplo, et ça ne semble pas fonctionner...

    • De mon point de vue ça marche — mais ça ne démarre qu’à la deuxième photo, pas à la première.

    • Bonjour Fil,

      Est-ce que c’est parce que j’ai mis à jour Firefox (avec lequel j’avais testé la page du Monde Diplo) ? Tout est-il que ça marche maintenant au poil ! C’est un bien beau plugin, merci aux contributeurs !

    Reply to this message

  • 2

    Bonjour,
    Je n’utilise plus que Photoswipe.
    Pourquoi ne pas le placer parmi les plugins-dist?
    Est il prévu d’y faire jouer des vidéos?
    J’ai vu des exemples de galeries avec des vidéos en lien sur le site de support Guithub.
    Merci

    • Je ne peux répondre que pour plugin-dists : parce qu’on essaie de réduire les plugins dist au minimum, et parce que il n’a pas été jugée que cette galerie (plutôt qu’une autre) était indispensable au fonctionnement de SPIP.

      En general dans plugin-dists se trouvent des choses qui historiquement étaient dans le core de SPIP et qui ont été modularisés.

    • Merci, j’avais lu ailleurs que c’était prévu.
      Bonne journée

    Reply to this message

Ajouter un commentaire

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