SPIP-Contrib

SPIP-Contrib

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

286 Plugins, 197 contribs sur SPIP-Zone, 236 visiteurs en ce moment

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

Photoswipe

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

11 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

Vos commentaires

  • Le 28 février à 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 à 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 à 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

  • Le 31 octobre 2016 à 14:44, par jules En réponse à : Photoswipe

    Merci pour ce super plugin.

    Quelqu’un a t-il travaillé sur une déclinaison sur les miniatures des albums ? Ainsi, quand on clique sur les miniatures des images d’un album, l’image agrandie se déploie en photoswipe ?

    Répondre à ce message

  • Le 19 octobre 2016 à 21:29, par oil En réponse à : Photoswipe

    Une piste pour les moyens-débutants :

    un ajout de :

    1. data-photo-h='#HAUTEUR' data-photo-w='#LARGEUR' data-photo='#URL_DOCUMENT'

    dans les modeles doc.html et img.html
    dans la partie img :

    1. <img src='#GET{fichier}' • <--- colle ici
    • Le 20 octobre 2016 à 09:16, par oil En réponse à : Photoswipe

      Avec au début du fichier biensûr :

             [(#ENV{mode_force,#MODE}|=={image}|oui)
              #SET{fichier,#URL_DOCUMENT}
              #SET{width,#LARGEUR}
              #SET{height,#HAUTEUR}
              #SET{url,#ENV{lien}}
      ]
    • Le 20 octobre 2016 à 11:15, par baroug En réponse à : Photoswipe

      En fait, des modèles sont désormais fournis avec le plugin, un modèle avec figure et un en dl dt classique… il faudra les intégrer à la doc.

    • Le 20 octobre 2016 à 18:41, par oil En réponse à : Photoswipe

      top, super pratique ce plugin ! merci !

    Répondre à ce message

  • Le 20 septembre 2016 à 11:42, par kris En réponse à : Photoswipe

    Bonjour, et un grand merci pour vos contributions ;-) Cette visionneuse manquait !
    Une petite chose cependant :
    Dans un portfolio, la première image se positionne bien, mais pas les suivantes (taille > 2000px) ; en surchargeant photoswipe.css par :

    .pswp__img {
     position: absolute;
     left: 0;
     top: 0;
    }

    tout rentre dans l’ordre (manquait les positions left et top)...

    Encore bravo :)

    • Le 20 septembre 2016 à 11:54, par baroug En réponse à : Photoswipe

      J’ai aussi vu le problème mais je pense qu’y’a une manière de le régler moins bourrine. Regarde l’exemple du diplo : pas de top ou de left et ça décale pas. Faut encore trifouiller un peu pour trouver une solution plus propre…

    • Le 20 septembre 2016 à 12:08, par baroug En réponse à : Photoswipe

      Je retire : sur la diplo tous les exemples que j’ai sont à - de 2000px donc peut être que c’est pareil. Mais je pense tout de même qu’il y a une meilleure solution.

    • Le 22 septembre 2016 à 00:51, par baroug En réponse à : Photoswipe

      Ok donc je pense mal : j’ai regardé dans l’actuel fichier css du projet sur Github, et à côté d’un certain nombre de changements, y’a aussi ces top : 0 et left : 0 sur .pswp__img. Donc tu avais parfaitement raison. Mea culpa.

    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.

    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

  • Facteur

    21 janvier 2010 – 383 commentaires

    Un plugin pour regrouper toutes les fonctions avancées autour de l’envoi de courriels. Introduction SPIP propose une fonction générique envoyer_mail() pour envoyer un courriel. Elle est assez simple d’utilisation mais peut paraître limitée (...)

  • Albums 3

    8 août 2014 – 224 commentaires

    Le plugin « Albums » évolue dans une version 3 pour SPIP 3. Avant d’effectuer une mise à jour depuis la version 1 ou 2, consultez les notes sur la rétro-compatibilité. Les modèles, notamment, on reçut quelques changements pour la bonne cause. En (...)

  • ciag : plugin « Groupes d’auteurs »

    30 novembre 2011 – 22 commentaires

    Ce plugin facilite l’affectation des auteurs aux rubriques, via des groupes d’auteurs. Il offre également des vues globales des affectations de rubriques aux auteurs. Les objectifs de ce plugin Le premier objectif est de faciliter (...)

  • Tickets, suivi de bugs

    28 novembre 2008 – 45 commentaires

    Tickets est un outil de suivi de bugs directement intégré à l’espace privé de SPIP. Il est conçu pour faciliter la phase de développement du site (notamment les squelettes du site public). Tickets est un système simple de suivi de bugs directement (...)

  • Titre de logo v2

    23 mai 2014 – 17 commentaires

    La version 2 du plugin Titre de logo reprend les mêmes fonctions que la v1 mais étend le titre et le descriptif aux logos de tout objet éditorial de SPIP. Vous pouvez toujours vous référer à l’article de la version 1 pour retrouver les fonctions (...)