Photoswipe

Publié le : 18 septembre 2016 – Dernière modification le 21 décembre 2021 – par 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 ans 1 an 3 mois Sans limite
par date
Filtrer

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.

    Répondre à ce 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 !

    Répondre à ce 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...

    Répondre à ce 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 ?

    Répondre à ce 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

    Répondre à ce 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 !

    Répondre à ce 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) !

    Répondre à ce 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 !! :)

    Répondre à ce 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.

    Répondre à ce 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...

    Répondre à ce message

  • 1
    Patrick

    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 ?

    • Patrick

      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

    Répondre à ce message

  • Patrick

    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.

    Répondre à ce message

  • 3
    Thom

    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 !

    • Patrick

      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

    • Thom

      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

    • naema

      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

  • 2
    beno

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

    • Fil

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

    • beno

      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

  • 2
    Patrick

    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

    • Maïeul

      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.

    • Patrick

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

    Répondre à ce message

  • Patrick

    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

  • VSlonska

    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

  • Patrick

    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

  • 5
    Patrick

    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

    • Patrick

      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

    • Patrick

      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

    • Patrick

      Je demande confirmation de cette imperssion...
      Merci

    • Fil

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

    • Patrick

      On fait comment pour ça ?

    Répondre à ce message

  • 4
    Gaby22

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

    • Maïeul

      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 utilisateurtrices

    • Gaby22

      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. :-)

    • Maïeul

      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

    • Gaby22

      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

  • 1
    AbsurdePhoton

    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-

    • AbsurdePhoton

      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

  • 3
    DébutantSPIP

    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.

    • b_b

      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.

    • Jhessy

      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 ?

    • Patrick

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

    Répondre à ce message

  • christophe

    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

  • 1
    oil

    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.

    • oil

      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

  • 2
    Patrick

    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

    • Patrick

      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.

    • Patrick

      En ligne ici sur le portfolio :

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

    Répondre à ce message

  • Chourak

    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

  • jules

    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

  • 3
    oil

    Une piste pour les moyens-débutants :

    un ajout de :

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

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

    <img src='#GET{fichier}'  • <--- colle ici
    • oil

      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}}
]
    • baroug

      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.

    • oil

      top, super pratique ce plugin ! merci !

    Répondre à ce message

  • 3
    kris

    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 :)

    • baroug

      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…

    • baroug

      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.

    • baroug

      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

Ajouter un commentaire

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.

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

Ce champ accepte les raccourcis SPIP {{gras}} {italique} -*liste [texte->url] <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Ajouter un document

Suivre les commentaires : RSS 2.0 | Atom