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

  • 1

    Ça ne s’affiche pas bien pour moi non plus. D’ailleurs, c’est quoi ce Jquery, je ne trouves ce plugin null part... J’ai trouvé un site sur JQuery mais je ne sais pas comment l’intégrer à ce plugin.

    • Ca ne s’affiche pas bien... mais encore ?

      Pour ce qui est de jquery, c’est integré à spip depuis la version 1.9.2.

      Mais il faut vraiment etre plus precis quand vous avez un problème et donner la version de spip et du plugin utilisé (ainsi que la liste des autres plugins si il y en a d’autres ou des spécificités du squelette s’il y a des choses qui peuvent interférer), sinon, c’est difficile d’aider.

      L’idéal c’est de mettre ca en ligne qqpart (chez free par exemple)

      @++

    Répondre à ce message

  • 3

    Bonjour à tous,

    Je viens d’installer ce plugin, qui semble correspondre parfaitement à mes besoins (intégrer une mini galerie d’images dans des articles). Toutefois l’affichage n’est pas correct lorsque je fais un simple test avec trois images.
    En effet j’ai bien mes petites vignettes, et une image affichée en grand, mais déjà à la base la grande image et les vignettes se superposent, et lorsque je clique sur d’autres vignettes les images s’ouvrent en taille maximale, débordant très largement sur la droite...

    J’ai essayé de modifier différents paramètres dans mes_fonctions.php, mais cela ne semble pas avoir d’effet visible...

    Je pensais que le problème venant peut-être de Jquery, mais c’est supposé marcher sans d’après ce que j’ai compris, et j’utilise aussi CurvyCorners et AnimatedCollapse qui fonctionnent parfaitement.

    Quelqu’un aurait une idée quant à ce que j’aurais pu oublier de faire ?

    Merci d’avance.

    • En vidant le cache j’obtiens un diaporama qui fonctionne, mais qui recharche la page à chaque nouvelle image et je n’ai plus les différentes possibilités de mise en page.

      Il me semblerait donc qu’il s’agisse d’un problème avec Jquery... Ce plugin fonctionne-t-il avec une version particulière de Jquery ? J’utilise la version 1.2.6 pour faire fonctionner d’autres éléments.

    • Après de multiples changements, vidages et de cache et autres, je me retrouve donc avec un diaporama qui fonctionne, mais sans faire appel à Jquery a priori, et les boutons de changement de mise en page ne font strictement rien.

      Et que ce soit avec la version 1.1 ou la version 1.2.6 de Jquery c’est la même chose. D’ailleurs Thickbox ne fait rien non plus... Par contre je fais appel à Jquery pour faire fonctionner les coins arrondis ainsi qu’un menu accordéon fait main ce qui fonctionne sans problème...

      Il semble donc que ce soit les plugins spip que ne se servent pas de mon jquery... J’avoue ne rien y comprendre et je bloque.

    • Salut,

      c’est visible en ligne qqpart ?

      en jquery 1.1 (1.1.4), c’est sur, ca marche.

      en 1.2, j’avoue ne pas etre sur, il me semble avoir fait quelques corrections pour preparer le passage, mais pas plus testé que ca.

      vu la question initiale, il y avait un probleme de CSS, pas de mecanique.

      @++

    Répondre à ce message

  • 2
    shinoo

    bonjour,

    où dois-je placer : $GLOBALS[’diapo_petit’]=350 ;

    car pour l’instant j’ai été obligé de redimensionner les photos avant de les mettre sur le site (donc si j’active thickbox il ne me fait pas d’agrandit puisque la photo est déjà à la taille)

     :(

    merci d’avance

    ps : le site http://www.shinoo.info/groupe

    • Salut,

      les paramètres se mettent dans /squelettes/mes_fonctions.php

      en fait d’après ce que je vois sur le site tu fait une galerie avec 3 photos avec les vignettes en haut, donc tu n’affiche jamais la petite photo, toujours la grande (qui est elle même déjà redimensionnée, tu peux mettre des grosses images sans problème)

      donc à mon avis, tu dois plutot mettre : $GLOBALS['diapo_grand']=278; et peut être
      $GLOBALS['diapo_vignettes']=10;

      mais j’ai surtout l’impression que tu n’as pas la dernière version du plugin, il faut prendre celle disponible ici.

      La c’est une vieille version qui n’est pas compatible avec le jquery 1.1.4 de spip 1.9.2d, donc ca ne marche pas bien (en fait ca marche sans le javascript, donc sans rechargement ajax, c’est dommage).

      voila.

      @++

      PS : superbe ce site, bravo !

    • je voulais dire $GLOBALS['diapo_vignettes']=3; bien sur...

    Répondre à ce message

  • 2

    bonjour,

    j’apprècie beaucoup ce plugin, meêm s’i lest vrai qu’il y a encore des choses à parfaire (configuration via CFG...).

    Bravo.

    Malheureusement je regrette une seule chose, nous ne pouvons pas utilisés ce plugin via le squelette directement :

    Dans le squelette, dans une boucle article, installez le code suivant :

    [(#MODELEdiapoid_article)]

    ça donne une erreur 403 !

    je vais voir ce qui cloche et essayé d’apporter une solution, si quelqu’un a trouvé une solution merci de partagé.

    @+

    • salut tout le monde,

      j’ai trouvé la solution pour utiliser le plugin directement via le squelette grâce au modèles.

      j’ai surchargé le fichier diapo (avec des modifications) dans modèles dans mon répertoire de squelettes et aussi j’ai mis dans mon squelette :

      [(#MODELEdiapoid_articlealign=left)]

      et là super ça marche,

      par contre l’ancienne écriture <diapoXX|left> n’est plus reconnue, enfin ne donne rien, je vais y remédier, il faut une compatibilité pour les deux version.

      et aussi m’attaquer à la configuration en CFG.

      @+

      en attendant je préfère l’utilisation en version #MODELE

    • resalut,

      je me réponds encore une fois moi même !

      ben sans rien surchargé finalement, il faut juste écrire la bonne baliee pour les modèles !

      [(#MODELE diapo id=#ID_ARTICLE align=left)]

      et là ça marche super bien !

      de plsu les 2 possibilités sont utilisables !!! (sur le même article ne plus, mais bon ça donne 2 diapo identiques, mais ça marche !), finalement je vais juste m’occuper de mettre les paramètres en CFG !

      Bon boulot bill.

      @+

    Répondre à ce message

  • Bonjour,
    mes vignettes se positionnent toujours au dessus de ma grande image. Dans mon squelette, je fais une boucle article qui appelle un article.

    Et dans l’article, avec le champs #TEXTE je met <diapo4|right>

    Mais il n’y a rien qui est pris en compte.

    Ensuite mes_fonctions.php n’est pas pris en compte.

    Je suis sur la version 1.9.2d

    Voici le lien

    Pourriez-vous me donner un coup de pouce svp .

    Merci

    RENE

    Répondre à ce message

  • 2

    Bonjour,

    Tout d’abord, merci beaucoup pour ce plugin que je trouve vraiment génial.

    Je viens d’installer la dernière version stable SVN hier soir et j’ai été agréablement surprise par la facilité de personnalisation des dimensions (bien qu’il faille beaucoup recalculer pour que tout soit pris en compte :-P ).

    Je me demandais s’il était possible dans une prochaine version de ne pas mettre les couleurs des petits boutons en dur dans diapo.css.html. On pourrait soit les mettre dans une feuille de style externe, soit dans mes_fonctions.php.

    Je propose cela parce que j’ai modifié le fichier diapo.css.html pour changer les couleurs et je me connais, je sais que quand j’installerai la prochaine version de diapo, j’écraserai tout le répertoire plugin/diapo sans réfléchir et je perdrai toutes mes modifs.

    Sinon encore merci pour cette contribution et vive Spip :-D

    • oui les modifs dans les modèles, c’est pas pris en compte tout de suite, le mieux, c’est de vider le cache.

      Pour la personnalisation de diapo.css.html, il suffit de poser le fichier modifié dans /squelettes (sans toucher à celui du plugin), comme ca il est utilisé à la place de l’original et on peut mettre à jour sans risque.

      Maintenant c’est vrai que la couleur pourrait etre en paramètre.

      il y a encore une autre solution, c’est de redéfinir les couleurs dans sa propre css en etant « un peu plus precis », genre :

      #contenu .diapo_icones a {
      	border-color:#dadada;
      }
      #contenu .diapo_icones a:hover, 
      #contenu .diapo_icones a.selected { 
      	border-color:#006169;
      }
    • Merci beaucoup pour cette réponse si rapide.

      Pour l’instant je vais poser le fichier modifié dans squelettes. Je n’y avais même pas pensé, j’ai honte ...

      Quand j’ai essayé de redéfinir les couleurs dans une autre css de mon répertoire squelettes, mes modifs n’étaient pas prises en compte. Je pense que ça dépend de l’ordre dans lequel les feuilles de style sont inclues. Je vais me re-pencher sur la question.

    Répondre à ce message

  • 2
    Sylvain Ringot

    Bonjour,

    J’essaye d’utiliser votre plugin pour présenter les couvertures de San-A, dans le site que j’anime (bibargenteuil.free.fr).
    Je fais les essais sur un autre site sur free, et je n’arrive pas à comprendre pourquoi l’organisation du diaporama n’est pas correcte (cf http://bib2arg.free.fr/spip.php?article49).
    En effet, les vignettes restent au dessus de l’image principale, qui se décale à droite ou gauche, mais pas franchement comme sur les autres exemples.
    Cordialement

    • quel est le paramétrage ?

      avec juste $GLOBALS['diapo_grand']=500; ca devrait marcher

      @++

    • Merci beaucoup pour votre réponse.

      J’avais mis cette variable à 300 au cours de divers essais, mais j’ai remis 500, enlevé toutes les autres valeurs de variables, et ça marche.

      Le seul « défaut » (marginal) est que la zone de présentation des images n’utilise pas l’ensemble de la largeur de la colonne centrale. Un exemple ici, et un autre .

      Votre plugin est génial. Excusez moi pour le dérangement, encore merci pour votre réponse.

      Cordialement

    Répondre à ce message

  • 1

    Une petite question : le plugin est bien installé mais aucun raccourci typographique supplémentaire. Je travaille avec eva web. Quelqu’un a-t-il une piste ?

    • Désolé question déjà traitée ..... Pas lu plus bas ......

    Répondre à ce message

  • 1

    Bonjour,
    récemment j’ai renvoyé à mon hébergeur l’intégralité du site mxl87.com
    (qui a été victime du filer 13...) je saurais pas dire ce qu’il en était avant le plantage chez gandi mais par contre je suis sûr qu’en local il n’y a pas de problème.

    en local les images qui dépassent sont redimensionnées alors que sur le site distant elles ne le sont plus.

    Les réglages de base me conviennent très bien, et je ne me préoccupe que de $GLOBALS['diapo_grand']=500; de toute façon.
    Le diapo_fonctions.php est bien présent chez l’hébergeur et il est (donc) pas surchargé dans mes_fonctions.php (qui de toute façon est là lui aussi).

    Naturellement je constate ça sans avoir modifié depuis aucun fichier en local, et en ayant vidé le cache. Quelqu’un saurait me dire où je peux chapuser pour régler ça, c’est pas bien grave mais ça fait tâche ...

    • Fausse alerte, j’avais oublié de cocher gd2 pour la génération des vignettes.

      Si ça peut servir à quelqu’un plus ...

    Répondre à ce message

  • 2

    Bonjour,

    je viens d’essayer d’installer la toute dernière version du plugin à la place de la précédente et ça me plante tout sur un site de test en local avec EasyPHP. Ca vient bien du plugin parce que quand je le désactive, tout redevient normal. J’ai juste en parallèle le plugin « nuage ». Je signale le problème parce que je suis bien incapable de le résoudre moi-même...
    D’autre part, j’étais déjà intervenu sur le forum pour les effets de transition entre les images. Un effet de fading intégré par défaut serait le bienvenu, non ?
    Merci pour votre travail.

    • sans plus d’info, difficile d’aider...

      quelque chose dans /tmp/spip.log ?

      pour les effets, il y a la manip plus loin dans les forums

      @++

    • Bonjour,

      merci d’avoir pris le temps de répondre. C’est moi qui me suis trompé et le plugin n’y est pour rien ! Tout fonctionne parfaitement et, en tâtonnant un peu, j’ai aussi réussi à intégrer un effet de fadeTo qui me convient bien. J’ai juste un temps de chargement des images qui n’est pas encore très fluide...

      a bientôt

    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