SPIP-Contrib

SPIP-Contrib

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

289 Plugins, 197 contribs sur SPIP-Zone, 125 visiteurs en ce moment

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

Photoswipe

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

12 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 18 septembre 2016

Retour en haut de la page

Tout afficher

Vos commentaires

  • 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

  • Le 18 septembre 2016 à 21:27, par DébutantSPIP En réponse à : Photoswipe

    Bonjour,

    On fait comment pour une utilisation normale du plugin ? Le test est concluant sur mon site :

    spip.php?page=public/demo_photoswipe

    Mais j’ai fait plein d’essais avec différentes syntaxes SPIP, je n’arrive pas à faire fonctionner !
    Dans la documentation, vous n’expliquez rien sur le syntaxe SPIP précise à utiliser, à part le fameux sélecteur...

    img[data-photo], a[type]

    et puis débrouillez-vous...
    Merci par avance.

    • Le 19 septembre 2016 à 09:06, par b_b En réponse à : Photoswipe

      Salut,

      On fait comment pour une utilisation normale du plugin ?

      C’est quoi une utilisation normale ? Tu souhaites utiliser le plugin sur quelle partie de tes squelettes ?

      Tu peux avantageusement t’inspirer du code fourni dans l’exemple pour l’adapter à la boucle du portfolio si c’est bien ce que veux faire. La partie importante est l’ajout des attributs data- comme expliqué plus haut.

    • Le 18 juillet 2017 à 16:49, par Jhessy En réponse à : Photoswipe

      Je comprend tout a fait ce que veux dire DébutantSPIP, a propos de la syntaxe.
      Comme sur SPIP quand on téléverse une image il y a souvent ces 3 caractéristiques de l’image : <image22340|left>, <image2814210|center>, <image20|right> où l’on peut utilisé le numéro derrière « image » pour l’associé a un mot-clé qui permettra d’affiché la galerie sur le site (par exemple : pour des plugins comme nivo slider on le mot clé c’est : nivoslider2345).
      le mot-clé "nivoslider" associé a un numéro "3453" (de la photo ou autre).

      Alors pour en revenir a ce que "DébutantSPIP" voulais dire ; c’est quoi la syntaxe ou encore LE MOT-CLÉ pour l’utilisation du plugin sur SPIP ?

    • Le 15 septembre 2017 à 17:50, par Patrick En réponse à : Photoswipe

      Bonjour,
      Comment afficher le descriptif en plus du titre à l’affichage de l’image ?
      Merci pour ce plugin.

    Répondre à ce message

  • Le 28 février 2017 à 19:00, par christophe En réponse à : Photoswipe

    bonjour,

    juste 3 questions :
    1- quelle est l’utilité du filtre photoswipe_preparer (qui est appelé par post_propre aussi) ?
    2- pourquoi insérer l’initialisation de photoswipe en « inline » dans le head de la page ? Et pourquoi ne pas mettre ce bout de code dans un fichier js spécifique ?
    3- pourquoi insérer le code html nécessaire à photoswipe en js, un modèle html ne serait pas mieux (plus souple) ? et d’ailleurs, le développeur dit justement dans sa doc : « You might ask, why PhotoSwipe doesn’t add this code automatically via JS, reason is simple – just to save file size, in case if you need some modification of layout. » ;-)

    merci pour les réponses.
    christophe

    Répondre à ce message

  • Le 19 janvier 2017 à 17:26, par oil En réponse à : Photoswipe

    Ce plugin est génial ! Merci à vous !
    Je cherche juste à obtenir une vignette grossissante comme c’est le cas avec la démo officielle du site, lors d’un clic sur une image celle-ci s’anime pour s’agrandir complètement.
    Avec le plugin actuellement nous avons un passage au noir lors du clic, comme si la photo était manquante.
    Ce qui me laisse peut-être penser que peut-être cela provient du manque de format d’images ’medium’ passé en data sur la démo.
    Quand j’ai le temps je teste si cela vient de ça, si oui on pourrait améliorer le code du modele doc.html avec un format intermédiaire.

    • Le 21 janvier 2017 à 17:38, par oil En réponse à : Photoswipe

      Le fameux espace noir ou devrait se trouver une petite photo lors du zoom à une classe css comme ça je pense (à vérifier surement dans le code du plugin)

      .pswp__img—placeholder—blank 

    Répondre à ce message

  • Le 16 décembre 2016 à 17:36, par Patrick En réponse à : Photoswipe

    Bonjour, je découvre avec plaisir ce plugin qui me satisfait.
    Merci pour cette contribution à l’écureuil.
    Comment afficher des vignettes qui ne se touchent pas (il n’y a pas d’espace entre celle du dessus et celle du dessous alors que pour la droite et la gauche, elle sont séparées) ?
    Est ce que c’est du ressort de la css du plugin ou de ma feuille de style ?
    Comme je penche pour la première hypothèse, je poste ici.
    Merci et bonne soirée

    • Le 17 décembre 2016 à 14:46, par Patrick En réponse à : Photoswipe

      Je me réponds :
      j’ai remplacé mon portfolio qui ne sert pas sur mon site photos aquarelles,
      la vignette étant interprétée comme un lien, la surcharge de la feuille perso.css suffit.
      Pour moi c’est :

      /* Liens images */
      a img
      margin:5px ;

      ,testé en local, bientôt en ligne

      Encore merci.

    • Le 19 décembre 2016 à 09:08, par Patrick En réponse à : Photoswipe

      En ligne ici sur le portfolio :

      http://imagesetpeche.free.fr/?Plage-surf

    Répondre à ce message

  • Le 15 décembre 2016 à 16:27, par Chourak En réponse à : Photoswipe

    Bonjour,

    Est-ce que l’exploitation de l’attribut data-author (avec la balise #CREDITS) est envisageable ?
    Je n’ai pas de souci pour le remplir mais je ne sais pas le ressortir dans la lightbox (comme sur la démo sur le site photoswipe.com)

    Je me base sur le code de la démo spip pour construire ma galerie.

    Merci !

    Répondre à ce message

Répondre à cet article

Qui êtes-vous ?

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

  • Article PDF

    9 juin 2007 – 366 commentaires

    Présentation d’un plugin fournissant une version PDF de l’article en cours

  • Pub Banner : gestionnaire de bannières publicitaires

    28 juin 2011 – 131 commentaires

    Le plugin « PUB BANNER » est un gestionnaire complet de bannières publicitaires pour des squelettes SPIP. Il prend en charge tous les types de bannières et permet de leur attribuer des publicités (locales ou distantes, images ou Flash). Chaque (...)

  • GIS 4

    11 août 2012 – 1439 commentaires

    Présentation et nouveautés La version 4 de GIS abandonne la libraire Mapstraction au profit de Leaflet. Cette librairie permet de s’affranchir des librairies propriétaires tout en gardant les mêmes fonctionnalités, elle propose même de nouvelles (...)

  • Leadescent (Squelette)

    28 avril 2012 – 73 commentaires

    Présentation : Ce squelette permet de modifier la page d’index du thème Leadescent (adapté du thème Wordpress du même nom réalisé par Padd Solutions). Voir une démo du thème et du squelette Leadescent. Il est recommandé d’installer le thème associé à (...)

  • Mailsubscribers

    16 janvier 2013 – 372 commentaires

    Ce plugin permet de gérer les inscriptions (ou abonnements) à la diffusion de contenu par email. Mailsubscribers permet de gérer les inscriptions par Opt-in simple ou double et la désinscription par URL. Ce plugin gère également plusieurs listes de (...)