SPIP-Contrib

SPIP-Contrib

عربي | Deutsch | English | Español | français | italiano | Nederlands

290 Plugins, 198 contribs sur SPIP-Zone, 109 visiteurs en ce moment

Accueil > Affichage multimédia > Galeries et diaporamas > Photoswipe > Photoswipe

Photoswipe

18 septembre 2016 – par Baroug, erational, Fil – 47 commentaires

18 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

  1. <div class="demo">
  2. <BOUCLE_galerie(DOCUMENTS){extension=jpg}{!par date}{0,5}{largeur>400}{statut in prop,publie}>
  3.         <a href="#URL_DOCUMENT" onclick="return false;">
  4.               [(#FICHIER|image_reduire{400,0}
  5.                  |inserer_attribut{data-photo,#URL_DOCUMENT}
  6.                  |inserer_attribut{data-photo-h,#HAUTEUR}
  7.                  |inserer_attribut{data-photo-w,#LARGEUR}
  8.                  |inserer_attribut{alt,#TITRE}
  9.                  |inserer_attribut{title,#TITRE}
  10.                  )]
  11.             </a>
  12. </BOUCLE_galerie>
  13. </div>

Télécharger

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

Dernière modification de cette page le 21 janvier 2018

Retour en haut de la page

Tout afficher

Vos commentaires

  • Le 5 septembre à 20:56, par Thom En réponse à : Photoswipe

    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 !

    • Le 6 septembre à 11:41, par Patrick En réponse à : Photoswipe

      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

    • Le 8 septembre à 03:21, par Thom En réponse à : Photoswipe

      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

    • Le 15 octobre à 22:42, par naema En réponse à : Photoswipe

      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.

    Répondre à ce message

  • Le 8 août à 06:05, par Patrick En réponse à : Photoswipe

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

    1. <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

    1. class='mediabox'

    pour lancer le plugin ?

    Répondre à ce message

  • Le 5 juin à 06:54, par beno En réponse à : Photoswipe

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

    • Le 7 juin à 18:39, par Fil En réponse à : Photoswipe

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

    • Le 10 juin à 07:50, par beno En réponse à : Photoswipe

      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 !

    Répondre à ce message

  • Le 3 février à 08:35, par Patrick En réponse à : Photoswipe

    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

    • Le 3 février à 15:46, par Maïeul En réponse à : Photoswipe

      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.

    • Le 3 février à 16:48, par Patrick En réponse à : Photoswipe

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

    Répondre à ce message

  • Le 3 février à 08:39, par Patrick En réponse à : Photoswipe

    Bonjour et merci,
    Pourquoi ne pas placer ce plugin dans les plugins-dist ?
    J’ai pu voir des galeries avec des vidéos.
    Est il prévu de faire évoluer le plugin en ce sens ?

    Répondre à ce message

  • Le 22 novembre 2017 à 16:02, par VSlonska En réponse à : Photoswipe

    Bonjour,

    Deux petites questions : Photoswipe permet normalement l’utilisation de galeries différenciées grâce au gid dans l’url, avec l’option galleryUID dans le fichier photoswipe_insert, en l’occurence. Si on ajoute cette option, on doit récupérer l’info tel qu’on le voit en bas de cette page : http://photoswipe.com/documentation/getting-started.html

    avec galleryUID: galleryElement.getAttribute('data-pswp-uid');

    puis un

    for(var i = 0, l = galleryElements.length; i < l; i++) {
           galleryElements[i].setAttribute('data-pswp-uid', i+1);
           galleryElements[i].onclick = onThumbnailsClick;
       }

    pour placer les identifiants sur chaque galerie rencontrée dans la page.

    mais il semble que dans l’implémentation du plugin, il n’y a pas d’élément conteneur de la galerie photoswipe... j’ai quelques doutes sur comment y parvenir.

    Autre question : on peut normalement ouvrir directement la galerie quand on arrive sur une url de type https://www.monde-diplomatique.fr/mav/141/A/53141#&gid=1&pid=1

    Est-ce impossible avec ce plugin ?

    Merci beaucoup,

    Répondre à ce message

  • Le 26 octobre 2017 à 17:49, par Patrick En réponse à : Photoswipe

    Bonjour,
    Photoswipe remplace la médiabox sur mon site, tout va bien, jusqu’aux tests sur petits écrans :
    les vignettes sont minuscules, à gauche et au mileu de la page.
    ICI par exemple : http://imagesetpeche.free.fr/?Surf-...
    Comment soigner ça ?

    Répondre à ce message

  • Le 15 septembre 2017 à 06:37, par Patrick En réponse à : Photoswipe

    Bonjour,
    J’utilise déjà photoswipe en plugin pour mon portfolio comme ici http://imagesetpeche.free.fr/?Jardin par exemple.
    Comment peut on afficher le descriptif des images ?
    Merci

    • Le 27 octobre 2017 à 07:22, par Patrick En réponse à : Photoswipe

      Bonjour,
      J’ai moi aussi changé les bornes et le plugin fonctionne à plein.
      J’ai tout de même un souci, la page ci dessus (message précédent) s’affiche bien jusqu’à la dimension ipad, mais il y a un bug pour la même page sur les téléphones.
      La page de demo fonctionne elle dans les deux cas.
      Pour vous qu’n est il ?
      S’agit il de mon squelettes ?
      Bonne journée

    • Le 27 octobre 2017 à 13:00, par Patrick En réponse à : Photoswipe

      Après avoir remplacé le contenu de lib/photoswipe dans le plugin par
      photoswipe-ui-default.js
      photoswipe-ui-default.min.js
      photoswipe.css
      photoswipe.js
      photoswipe.min.js

      default-skin.css
      default-skin.png
      default-skin.svg
      preloader.gif
      pris sur le site de photoswipe aujourd’hui, cela semble fonctionner pour un iphone.
      Toutefois, la console (chrome f12) cherchait rien.gif pour l’image agrandie.
      Une fois réinjecté en racine du site, swipe s’est mis à fonctionner comme attendu.
      Une petite mise à jour à faire.
      Bonne journée

    • Le 27 octobre 2017 à 13:05, par Patrick En réponse à : Photoswipe

      Je demande confirmation de cette imperssion...
      Merci

    • Le 27 octobre 2017 à 13:24, par Fil En réponse à : Photoswipe

      peux-tu l’ajouter directement dans le plugin sur la zone ? merci !

    • Le 27 octobre 2017 à 18:22, par Patrick En réponse à : Photoswipe

      On fait comment pour ça ?

    Répondre à ce message

  • Le 16 octobre 2017 à 11:46, par Gaby22 En réponse à : Photoswipe

    J’espère qu’on aura rapidement une version compatible 3.2, ce plugin est vraiment utile :-)

    • Le 16 octobre 2017 à 11:56, par Maïeul En réponse à : Photoswipe

      Salut,

      tu peux deja tester en modifiant les bornes dans paquet.xml et plugin.xml pour pouvoir activer le plugin et voir ce que cela donne. Si cela marche sans aucun bug cheztoi, alors on pourra le signaler aux autres utilisateur·trice·s

    • Le 16 octobre 2017 à 15:14, par Gaby22 En réponse à : Photoswipe

      En effet j’ai testé ce matin en modifiant les bornes du fichier paquet.xml. ça semble fonctionner correctement mais j’ai pas fait de tests poussés.
      Ce serait quand même mieux une version officiellement compatible. :-)

    • Le 16 octobre 2017 à 15:20, par Maïeul En réponse à : Photoswipe

      En fait il n’y pas de personnes qui peut dire officiellement tel ou tel plugin est compatible, mais la communauté dans son ensemble.

      Donc si tu te sens de faire des tests poussés (lesquels) ? on pourra marquer officiellement comme compatibke

    • Le 16 octobre 2017 à 15:54, par Gaby22 En réponse à : Photoswipe

      Bah le ou les personnes à l’origine du plugin sont peut-être plus à même que moi de dire si le plugin est entièrement compatible ou non (J’ai pas suivi le détail des modification de la 3.2, il y a peut-être des améliorations à apporter aux plugins).
      Sinon pour les tests, ce matin au boulot entre 2 dossiers j’ai mis à jour un projet de site Spip en v3.2. J’ai modifié le fichier paquet.xml pour pouvoir forcer l’activation du plugin, j’ai recalculer une page sur laquelle j’utilisais le plugin photoswipe et ça fonctionnait. Donc bon, est-ce que ça suffit à dire que le plugin est parfaitement compatible ?
      Je viens de tester la page demo, ça fonctionne également...

    Répondre à ce message

  • Le 13 septembre 2017 à 02:48, par AbsurdePhoton En réponse à : Photoswipe

    Merci beaucoup pour ce plugin qui génère automatiquement un effet « lightbox » sur les images :)

    Je l’ai utilisé couplé à un script php qui me permet de construire ma galerie en incluant automatiquement un filigrane et des données exif dans mes images. Il a suffi d’ajouter 3 petits tags dans chaque image et ça fonctionne à merveille !

    C’est tellement facile, j’ai passé plus de temps à lire la présente page qu’à mettre en œuvre le plugin lui-même, c’est pour dire !

    Si vous voulez un exemple, ouvrez n’importe quelle galerie sur mon site : https://www.absurdephoton.fr/-Galeries-

    • Le 16 septembre 2017 à 01:29, par AbsurdePhoton En réponse à : Photoswipe

      Juste un petit bémol : j’ai découvert que le titre de l’image se mettait dans la balise « title »... et en faisant ça mon texte n’est pas centré, mais décalé vers la gauche.

      Où faut-il modifier cela ? dans le CSS je suppose ?

    Répondre à ce message

Répondre à cet article

Qui êtes-vous ?
  • [Se connecter]

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici Les choses à faire avant de poser une question (Prolégomènes aux rapports de bugs. )
Ajouter un document

Retour en haut de la page

Ça discute par ici

  • Groupes de mots clés arborescents

    26 juillet 2012 – 37 commentaires

    Ce plugin permet de gérer une arborescence de groupes de mots clés. Les sous groupes de mots héritent des propriétés du groupe racine (sur quoi peut on le lier ? peut il y avoir un ou plusieurs mots). Les formulaires de liens qui permettent de lier (...)

  • Jeux pour SPIP 3

    27 juillet 2012 – 52 commentaires

    Un portage pour SPIP 3 du plugin Jeux a été fait. Explications et nouveautés. Cet article concerne une mise à jour du plugin Jeux dont la description complète est disponible ici : Des jeux dans vos articles !. Le code du plugin Jeux est un code (...)

  • Mailshot

    16 janvier 2013 – 336 commentaires

    Ce plugin prend en charge l’envoi en nombre d’info-lettres par email. Mailshot permet l’envoi en nombre d’emails au moyen d’un SMTP (ou d’un service externe) dédié à cet effet. Il permet de limiter la cadence d’envoi. Enfin, ce plugin implémente la (...)

  • Plugins Giseh

    26 novembre 2010 – 460 commentaires

    Les plugins correspondants aux fonctionnalités de Giseh, compatibles avec SPIP 3.2, SPIP 3.0 (et SPIP 2.1) et compatibles (sous SPIP 3.2) avec PHP 7.0 et 7.1, sont les suivants : le plugin « ciparam : Configurateur de squelettes » le plugin « cisquel  (...)

  • Bouquinerie V2

    6 octobre 2017 – 23 commentaires

    Voici la version pour SPIP 3.x du plugin Bouquinerie. Cette nouvelle version permet de gérer des livres et le ou les auteurs associés. Elle n’est pas compatible avec la précédente version. Cet article est une présentation générale et un guide pour (...)