Plugin Diapo

Galerie / diaporama en modèle

Plugin ajoutant le modèle <diapoXX> permettant d’insérer les images de l’article XX sous forme de galerie/diaporama reprenant le fonctionnement de la galerie Walma.

But

Ayant besoin d’une galerie photo pour un site, j’ai d’abord créé un squelette spécifique (incluant un bloc inc-walma...).
Puis, la question s’est posée d’utiliser plutôt les brèves ou les rubriques...

J’ai finalement opté pour un modèle pour me libérer de cette contrainte.
Le résultat est visible sur le site du Pays Bourgogne-Nivernaise (v1) et sur ce site de test

Cette approche permet en plus de personnaliser / réutiliser facilement les développements.

Installation

C’est un plugin, il suffit de le placer en sous-répertoire du dossier /plugins et de l’activer.

Utilisation

Vous disposez alors d’un nouveau raccourci typographique <diapoXX> permettant d’insérer les images de l’article XX sous forme de galerie/diaporama.

Vous pouvez spécifier le mode par defaut :
-  <diapoXX|diapo> (équivalent à <diapoXX>) pour le diaporama
-  <diapoXX|pause> pour le diaporama en pause
-  <diapoXX|left> pour une galerie avec vignettes à gauche
-  <diapoXX|right> pour une galerie avec vignettes à droite
-  <diapoXX|center> pour une galerie avec vignettes en haut et grande image

Le modèle fonctionne avec JQuery, utilisant des appels AJAX pour la pagination et le chargement des images, mais reste fonctionnel sans javascript.

Personnalisation

Avec la version 2 du plugin, compatible SPIP3 et responsive, les paramètres sont définis dans une page de configuration. Plus besoin donc du fichier mes_fonctions.php.

Avec les versions antérieures :
Vous pouvez definir plusieurs paramètres de personnalisation dans votre fichier mes_fonctions.php :
-  le temps de pause du diaporama (en millisecondes, par défaut 8000) :

//temps de pause 5 secondes :
$GLOBALS['diapo_temps']=5000;

-  le nombre de vignettes par page (par défaut 8) :

//10 vignettes par page :
$GLOBALS['diapo_vignettes']=10;

-  la largeur maximum de la « grande » (diaporama et center) image (en pixels, par defaut 560) :

//largeur de la grande image  500px maxi :
$GLOBALS['diapo_grand']=500;

avec la feuille de style par défaut (diapo.css.html), le diaporama fera 4px de plus en largeur (2px de marge).

-  La taille des vignettes (calculée automatiquement si elle n’est pas précisée pour que les vignettes tiennent sur une ligne en mode center).

//largeur et hauteur maxi des vignettes 80px :
$GLOBALS['diapo_vignette']=80;

-  la largeur maximum de la « petite » image :

$GLOBALS['diapo_petit']=350;

Par défaut, il n’y a pas de restriction en hauteur pour les images (petite et grande) mais les vignettes sont réduite en largeur et hauteur.

Vous pouvez préciser également ces paramètres :

$GLOBALS['diapo_grand_h']=400;
$GLOBALS['diapo_petit_h']=300;
$GLOBALS['diapo_vignette_h']=70;

Il n’y a pour l’instant pas de véritable gestion de modèles, mais c’est en réflexion. Vous pouvez déjà surcharger le modèle en posant le vôtre dans /squelettes/modeles/diapo.html.

[(Attention : certaines règles strictes (bidouilles) doivent être respectées en attendant mieux.

Regardez les commentaires dans le code des squelettes si vous personnalisez le modèle.

Mais il y a déjà de quoi faire avec la feuille de style et les modèles de pagination.)]

Discussion

169 discussions

  • Marc VALLETEAU de MOULLIAC

    Bonjour, il ne me reste maintenant plus de cheveux à arracher, aussi je me résoud à écrire ici !!

    J’ai installé le pugin Diapo (téléchargé aujourd’hui) + thickbox2. Jusque là, ça va. Tout activé dans admin.

    J’ai fait ensuite tout comme il est écrit, et le diaporama s’affiche en bas de mon article, et en cliquant sur une vignette, l’image centrale apparaît. MAIS !!!!!!! Ensuite, impossible d’afficher l’image sur le fond gris transparent comme dans les exemples !! Je deviens fou !! Lorsque je vais sur Pays Bourgogne-Nivernaise, tout marche bien, mais pas chez moi !! Je vois bien une page grisée, des petits points qui tournent, mais d’image, NIB !!!

    Je suis sur spip 192b[9381], Safari 3.0 beta, mais le navigateur n’est pas encause, puisque ça marche sur d’autres sites !!

    Voilà - vraiment - plusieurs mois que je rame, sans rien y comprendre !! Je suis pratiquement nul en js, mais, comme il est promis que cela doive marcher sur une « simple » installation, alors quoi, qu’est-ce que j’ai loupé ??

    En plus, j’ai regardé le code la page généré sur Pays Bourgogne et le mien, c’est le même (sauf que je n’ai pas le plugin jquery-1.0.2pack.js, par contre, j’ai bien jquery natif de spip).

    Si l’un d’entre vous pouvait me dire ce qui cloche ??? Je suis désespéré ...

    Merci.

    Marc

    Répondre à ce message

  • 1
    Marc VALLETEAU de MOULLIAC

    Bonjour, je viens d’installer le plugin, qui ne fonctionne que très partiellement ... En effet, j’ai bien les vignettes sur le coté et une image au milieu. Pourtant, lorsque je clique sur l’image du milieu, toute la page devient grise, je vois très brièvement une espèce de truc circulaire avec du pointillé, et puis, plus rien : tout reste grisé et transparent, mais aucune image affichée ...

    J’ai bien tickbox installé. Qu’est ce qui me manque ? Je suis sous safari 2, os 10.4.9, mais je ne crois pas que cela vienne de là, puisque l’exemple plus haut fonctionnne.

    Installation sur un spip 1.9.2a[8912]

    Merci. Marc

    • J’ai le même problème.

      Voici l’erreur renvoyée par la console :

      Erreur : TB_chemin_close is not defined
      Fichier source : http://127.0.0.1/site_test/plugins/thickbox2/javascript/thickbox.js
      Ligne : 174

      Arf, il va falloir encore farfouiller

    Répondre à ce message

  • 1

    Bonjour,

    Je viens d’installer le plugin sur un spip 1.9.2b est tout semblait fonctionner normalement. Seulement j’ai remarqué qu’après avoir lancé un diaporama, la pagination ne fonctionne plus. Aurais-je mamnquer quelque chose ? Comment y remédier ?

    • Fausse alerte !
      J’ai modifié par erreur diapo.html au lieu de modeles/diapo.html dans le repertoire du plugin. Après correction, tout est redevenu dans l’ordre.

    Répondre à ce message

  • 1

    Si ça intéresse les suivant-es, je signale que le diapo, dans la mesure où il est intégré dans le texte même de l’article, apparait dans le forum attaché à cet article.

    • c’est un probleme de css.

      quel squelette utilises-tu ?

      sans doute avec

      div.diapo {position:relative;display:block;}

      (peut etre en specifiant aussi la hauteur ?), ca devrait etre bon.

      @++

    Répondre à ce message

  • 1

    Bonjour tt d’abord merci pour ce pluggins...
    mais parce qu’il y a un mais, j ai un problème avec l’ affichage des vignettes. La première apparait à 100% donc je me retrouve avec une vignette et une image à la mm taille... J ai beau avoir cherché dans les différents fichier du pluggins je n ’est pas trouvé la solution, d’autant que les autres vignettes apparaissent normalement...

    Y a t il déjà eu un précédent ??

    Je suis sur une version 1.9.2 avec la dernière version du pluggins (version svn stable)

    Si vous avez une idéé ????

    • Trois idées en vrac :

      1) verifier ce qu’il y a dans la configuration de spip (fabrication des vignettes) => bien selectionner un GD utilisable et specifier la taille par defaut des vignettes.
      Ne pas hesiter à revalider la config si tout a l’air bon.

      2) regarder si il n’y a pas de filtre sur #TEXTE dans le squelette utilisé (genre reduire_image)

      3) sinon, donner une adresse ou on puisse voir ca ou envoyer le code généré

    Répondre à ce message

  • 2

    Bonjour, merci et bravo du résultat.. sur le site du créateur. Je suis sous spip 1.9.2 ; j ’ai téléchargé la version stable du plugin. Tout est OK mais le joli effet de l’image qui disparait vers la droite sur le site exemple ne fonctionne pas, ou peut-être réclame-t-il un complément ? j’ai testé sur firefox, Opera 9.21 et IE 7. Partout le joli effet, sauf chez moi, snif !
    Pardon de ne pas indiquer de lien, je suis en plein travaux.. ;-)

    • Bonjour, excellent plugins, comme tout le travailleur de nos spipeurs d’ailleurs !!!!
      J’ai le même souci que toi avec mon plugins ( spip 1.9.2 avec diapo 1.9, thickboxv2 )
      Et pas le joli effet ombrée, j’ai lu (ça fait 2 jour que je cherche) qu’apparement,
      il faudrait récupérer le diapo.js du site
      http://www.bourgogne-nivernaise.com/plugins/diapo/diapo.js
      Quel qu’uns aurait une petite idée ??

    • alors, effectivement, l’effet n’est pas en standard dans le plugin.

      En fait, sur le site exemple, j’ai integré les effets dropOut et DropIn d’Interface (voir les differents effets disponibles).

      Il faut donc recuperer le script correspondant (sur meme site, il suffit de cocher les effets souhaités, il genere un script avec juste ce qu’il faut).

      Ensuite, il suffit d’ajouter l’effet voulu dans le script de diapo :

      function diaposlide(timeout){
      	if (diapo_on){
      +		$("#diapo").DropOutRight(700);
      		mClass=$("#diapo_grand").show().attr('class').split('_');
      
      (...)
      				$("#diapo").html(txt);
      +				$("#diapo").DropInLeft(700);
      		});
      		setTimeout('diaposlide('+timeout+')', timeout);
      	}
      }
      
      (...)
      
      $.fn.diapo_vignette = function() {
          return this.click(function() {
      +    	$("#diapo").DropOutRight(700);
          	mClass=$(this).attr("class").split('_');
      
      (...)
          				$("#diapo").html(txt);
      +				$("#diapo").DropInLeft(700);
      			});
      		return false;
          });
      };

      @++

    Répondre à ce message

  • 9

    Bonjour,
    j’ai un petit souci, lorsque la page est chargée avec une première grande image par défaut, si je clique sur le bouton de lecture du diaporama, rien ne se passe... et j’ai l’erreur javascript suivante :

    $("#diapo_grand").show().attr("class") has no properties
    diaposlide(8000)diapo.js (line 6)
    diapo_mode()diapo.js (line 35)
    e(click clientX=0, clientY=0)jquery.pack.js (line 1)
    [Break on this error] mClass=$("#diapo_grand").show().attr('class').split('_');

    En revanche, si je clique d’abord sur une des vignettes, et lance ensuite le diaporama, tout fonctionne correctement...
    Auriez-vous une idée pour corriger ça ?

    • salut,

      bon, tu es en 1.9.1 pour spip (mais ca devrait marcher quand meme) et je ne sais pas si tu as la dernière version du plugin (version svn stable).

      le code généré n’a pas l’air de coller avec ce que j’ai dans /modeles/diapo.html

      tu peux me donner un lien vers ce fichier ?

      @++

    • C’est la dernière version svn stable et j’ai modifié diapo.html notement en enlevant les href sur la grande image... c’est à peu près tout.
      Merci

    • visiblement, ca n’est pas ce modele qui est utilisé...

      le modele contient :

      <div id="diapo"[ class="(#ENV{align}|match{right|left}|?{'diapo_petit','diapo_grand'})"]>
      
      <img id="diapo_petit"[ style="(#ENV{align}|match{right|left}|?{'','display:none'})"] src='[(#FICHIER|image_reduire{500,0}|extraire_attribut{src})]' height='[(#FICHIER|image_reduire{500}|hauteur)]' width='[(#FICHIER|image_reduire{500}|largeur)]' alt='[(#TITRE|supprimer_numero|texte_backend)]' />
      
      <img class="diapo_[(#_art:ID_ARTICLE)]_[(#COMPTEUR_BOUCLE)]" id="diapo_grand"[ style="(#ENV{align}|match{right|left}|?{'display:none',''})"] src='[(#FICHIER|image_reduire{500,0}|extraire_attribut{src})]' height='[(#FICHIER|image_reduire{500,0}|hauteur)]' width='[(#FICHIER|image_reduire{500,0}|largeur)]' alt='[(#TITRE|supprimer_numero|sinon{[(#FICHIER|)]})]' />

      alors que le code généré correspondant est :

      <div id="diapo" class="diapo_grand">
      
      <img src='IMG/cache-335x500/1_C_V._Muteau_-_miserables-335x500-335x500.png' width='335' height='500' alt="Misérables ! (1) © V. Muteau" style='display:none' />
      <img src='IMG/cache-335x500/1_C_V._Muteau_-_miserables-335x500-335x500.png' width='335' height='500' alt="Misérables&nbsp;! (1) © V. Muteau" class='diapo_1559_1' />

      il manque les id aux images.... donc ca coince.

      maintenant, je ne vois pas pourquoi il ne prend pas ce modele puisqu’il est au bon endroit.

      sauf si tu as un repertoire modeles à la racine ?

      il faut deja verifier si c’est bien ce fichier qui est pris en compte (en ajoutant une chaine de caractere en dur, genre !!!!!! tout au debut)

    • Je n’y comprends rien, pas d’autre répertoire « modeles » en racine, j’ai vérifié en y incrivant quelque chose et il s’agit bien de ce fichier qui est pris en compte, et toujours pas d’id à l’image... hum hum
      Tu as une autre piste ?

    • Je n’y comprends rien, pas d’autre répertoire « modeles » en racine, j’ai vérifié en y incrivant quelque chose et il s’agit bien de ce fichier qui est pris en compte, et toujours pas d’id à l’image...
      Du coup j’ai repris tout les fichiers du zip et les ai retransférés... pas de changement, toujours pas d’id généré :-/
      hum, une autre piste ?

    • Appeler Mulder ?

       :)

      heu, tu peux me faire passer un acces FTP que je regarde ?

    • heu, une adresse mail peut-être ;- ?

    • zut, c’est vrai que ca ne s’affiche pas meme quand on le rempli...

      spipcarto at gmail.com

      sinon, question complementire : tu l’appelle comment le diapo ? avec un alignement (|center ?) ?

      fait le test avec |center et |diapo pour voir ....

    • Le problème de démarrage du diaporama, avec la première image chargée, provenait du filtre |image_reduire appliqué à la balise #TEXTE sur un spip 1.9.1.
      En enlevant ce filtre, tout rentre dans l’ordre.
      Il semblerait que le bug soit corrigé dans la 1.9.2.
      Merci à Bill pour sa perspicacité et la rapidité de son intervention.
      Encore bravo :-)

    Répondre à ce message

  • 4

    Bonjour,

    merci pour ce plugin !

    N’étant pas un spécialiste de javascript, pourriez-vous m’indiquer s’il est possible de faire démarrer le diaporama automatiquement ? Sans cliquer sur « Lecture ».

    Merci d’avance !

    • en fait, ce point n’a jamais été fini, mais le plugin devrait le gerer.

      diapoX|diapo doit mettre en position diapo mais arreté.

      peut etre qu’en ajoutant simplement à la fin de modeles/diapo.html :

      [(#ENValign|==diapo| ?’ ’,’’)

      <script type="text/javascript">
      $(document).ready(function(){
      if ($("#diapo_icocenter").attr("class")=="selected")
      $("#diapo_icocenter").click();
      });
      </script>


      ]

      à tester...

    • Merci de votre réponse, malheureusement, cela ne semble pas fonctionner.
      J’ai remis les accolades manquantes dans la première ligne mais rien ne se passe.

    • Bonsoir,

      après avoir farfouillé dans le bout de code que vous m’aviez donné, j’ai enfin trouvé la coquille !

      Donc voilà le morceau de code à mettre à la fin de /modeles/diapo.html pour avoir une lecture automatique :

      [(#ENV{align}|{==diapo}|?{' ',''})
      <script type="text/javascript">
      $(document).ready(function(){
      if ($("#diapo_ico").attr("class")=="selected")
      $("#diapo_ico").click();
      });
      ]

      Merci encore pour la solution !

    • ah, oui, oups, je m’etais trompé de bouton....

      merci, je commite ca de suite.

      @++

    Répondre à ce message

  • 1

    Soit des articles auxquels on a joint des images. Le rédacteur a le choix de deux utilisations :
    1- Portfolio classique
    Les images jointes sont affichées à la fin du texte, par exemple, par une boucle (DOCUMENTS) dans le squelette article.html
    2 - Plugin diapo Le rédacteur peut vouloir afficher les images jointes sous forme de diaporama/portfolio amélioré en mettant dans la zone de texte l’appel . Ça colle, pas de problème au détail près que la boucle DOUMENTS réaffiche également les images.

    J’ai donc cherché à jouer avec le critère doublons en le mettant à la fois dans la boucle (DOCUMENTS) du squelette article et dans le squelette du Modèle du plugin diapo en me disant que les documents appelés par le plugin seront mémorisés par le critère doublons et ne seront pas pris en compte par la boucle DOCUMENTS, mais, bon, ça ne fonctionne pas...le doublonnage ne doit pas passer d’un squelette (modèle diapo) à l’autre (article.html) ou un truc comme ça.

    Une piste pour résoudre ça ?

    • zut, j’avais pas vu ce message....

      heu, pas facile, effectivement : les doublons n’agissent que dans le perimetre de leur squelette, et ici, en plus, c’est un modele, ce qui complique deja bien les choses (il y a un debut de solution pour propager les doublons dans les inclusions)

      Autre point important : on peut afficher le diapo des documents de l’article X dans la’article Y (ou dans une breve ou dans une rubrique...)

      une solution serait sans doute d’utiliser un peu de javascript pour masquer dans le portfolio les documents presents dans le diapo.

      de memoire, il y a toujours une classe document_XX dans le portfolio, il faudrait donc ajouter une classe diapo_document_#ID_DOCUMENT dans les images du modele diapo et appliquer un script qui fasse un hide sur le doc du portfolio correspondant.

      @++

    Répondre à ce message

  • 8
    Musashi

    salutation,

    j’ai installer le plugin sur un spip 1.9.2, ensuite je l’est activer, mais je ne vois aucun boutton de diapo dans la barre !
    si ce plugin n’est pas au point a ce degré, alors priere de ne pas proposer si tôt vos travails. et ne penser pas qu’il y a que des connaiseurs qui utilise ces plugins, moi je suis le type qui cherche des trucs pour me facilité les taches et du coup avancer, alors penser un peu à nous !!!

    merci

    • héhéhé, on crois rever !

      non, ca n’ajoute pas de raccourci dans la barre, comme l’article (qu’il faut lire) l’indique, il faut ajouter le raccourci « à la main » (l’avantage etant qu’on peut mettre le diapo de l’article X ou on veut, y compris dans une breve, une rubrique ou un autre article).

      Désolé, vous êtes trop con pour utiliser ce plugin...

       :)

    • merci pour ce message,
      si vous vous amuser a vous donnez des plugins entre connaisseur, je comprend pourquoi vous traiter le reste par des cons
      j’attenderais qu’une personne meilleur trouve une sollution à mettre si simple un lien visible d’insertion d’une image dans un article sous forme de diapo !!! cette personne auras au moins le titre de Contribueur spip.

      continuer les gars vous etes à la hauteur...

    • Bon, déjà, le « vous êtes trop con.... », c’etait de l’humour, comme le smiley qui le suivait l’indique, et ca se rapportait au fait que la reponse à la question etait dans l’article qu’il suffisait donc de lire.

      Ca parait quand meme un minimum, lire l’article, non ?

      c’est à la portée de tout le monde, ca ne necessite pas un BAC+5, si ?

      de la meme facon que mettre <diapo12> pour afficher la galerie de l’article 12 ne me parait pas insurmontable (d’ailleurs les admins ont classé cette contrib en « tout public », c’est pas moi...).

      Alors avant d’aller dire à quelqu’un, qui a pris sur son temps (de sommeil) pour faire un plugin, le packager, le mettre à dispo et ecrire un article qui explique pourquoi il l’a fait et comment s’en servir, qu’il n’aurait pas du publier son plugin, on lit l’article !

      Ensuite, si on se decide à l’installer, sachant à quoi il sert et comment il marche, on pousse jusqu’à lire les forums sous l’article, car on y trouvera sans doute un peu de retour d’experience utile (et on constate alors que plein d’utilisateur sont tres content que ce plugin existe et qu’il ait été publié sur spip-contrib, ce qui evite de faire des remarques désobligeantes et égoistes).

      Enfin, si on a des remarque ou des idées d’amélioration, ou si on a besoin d’un coup de main pour installer/parametrer, on peut utiliser le forum.

      Donc je note qu’une amélioration possible serait d’avoir un raccourci dans la barre typo (ca serait alors dans la BTE, car la BTStandard n’est pas extensible).
      Reste à definir l’ergonomie et à le coder....

    • Salut mon ami, je crois que je t’es trop mener en bateau, mais oui j’ai compris dès le premier coup, et j’ai soigneusement lit l’article ! :) Ne m’en veux pas trop mon vieux, toi aussi tu devrais bien lire mon dernier message à la fin, j’ai dis : « continuer les gars vous êtes à la hauteur... » Et le titre de « contributeur spip » aussi pour te remercier !
      Désolé pour cette longue plaisanterie, j’espère que tu me pardonneras et je considère parfaitement les nuits que tu passe pour travailler sur ces plugins !

      Maintenant j’ai une vraie question très simple : l’affichage sur le squelette Alternative en mode court (800) donne une mauvaise présentation des photos, est ce qu’il y a une manip pour ajuster l’apparition de la photo principale et les vignettes qui vont autour, sachant qu’ils se mettent n’importe comment

      encore merci pour cette contrib

    • Pfffff... et moi j’ai plongé !

      C’est pas gentil de jouer avec la naiveté des gens comme ca !
       :)

      Faut dire aussi que ces derniers mois, j’ai vu passer de tels trucs sur les listes que c’etait crédible.

      Pour changer la taille des images, il faut modifier le modele pour le moment car les tailles sont en dur (mais ca devrait s’arranger rapidement).

      la reponse doit etre la

    • Merci, ça marche parfaitement ! impecable même...
      continuez comme ça les gars vous étes à la hauteur !!! (c’est pour de vrais :) )

    • La vulgarité n’a jamais fait avancer les choses...
      Et votre plugin ne fonctionne pas sur votre site-exemple : http://www.bourgogne-nivernaise.com/Album-photo.html.

    •  ???

      j’ai pas bien compris la ....

      Pour le site du pays bourgogne-nivernaise, je n’ai pas de retours negatifs, avec quel navigateur y a-t-il un probleme et quel est le probleme ?

      dire « ca ne fonctionne pas », ca n’apporte pas grand chose en informatique.

      enfin, c’est pas grave, il y a des gens à qui ca a rendu service, c’etait le but de la manoeuvre.

      @++

    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