Plugin Diapo

Galerie / diaporama en modèle

Publié le : 11 décembre 2006 – Dernière modification le 21 décembre 2021 – par bill, Jean Christophe Villeneuve – 544 commentaires

Deutsch, Español, français, italiano
1
2
3
4
5
32 votes
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

5 ans 1 an 3 mois Sans limite
par date
Filtrer

169 discussions

  • 2

    Bonjour,

    j’ai essayer d’installer ce plug in mais je n’arrive pas a le faire fonctionner

    j’ai ce message d’erreur, pourriez vous me renseigner ?

    (documents)
    Erreur MySQL
    documents.id_document, 0+documents.titre AS num, documents.fichier, documents.titre, J1.mime_type, documents.descriptif FROM spip_documents_articles AS L1, spip_types_documents AS J1, spip_documents AS documents WHERE (L1.id_article = ’31’) AND diapo(8) AND (documents.id_type = J1.id_type) AND (documents.taille > 0 OR documents.distant=« oui ») AND documents.id_document=L1.id_document GROUP BY documents.id_document ORDER BY num
    You have an error in your SQL syntax ; check the manual that corresponds to your MySQL server version for the right syntax to use near ’(8) AND (documents.id_type = J1.id_type) AND (documents.taille

    jai instaler le plug in, diminuer les valeurs en px des images dans la css et j’ai placer modele dans le dossier squelette

    merci d’avance :)

    • pb d’installation je pense.

      vu l’erreur, le modele est bien pris en compte mes diapo_options.php n’est pas chargé (critere diapo non pris en compte)

      quelle version de spip / du plugin ?

      quel(s) autre(s) plugins (quoi que je ne vois pas ce qui peut entrer en conflit, sauf un autre fichier diapo_options.php ailleurs)

      je ne vois pas trop sinon.

    • Merci pr la reponse

      ma version spip est la 1.9.2

      la version du diapo est la version stable

      les autres plug in sont

      definition de mots clefs
      des jeux dans vos articles
      nuage de mot clef

      Voila :)

      si jamais tu vois pas, tu pourrais reprendre les grand phase de l’instal silteplait ? :))

      je suis debutant et il se peut que j’aie oublié quelque chose

      merci d’avance :))

    Répondre à ce message

  • 1
    Darte

    Bonjour,

    Je viens d’installer ce plugins qui fonctionne parfaitement.

    J’aurais juste voulu savoir comment je pouvais faire pour que la grande image fasse la taille que je souhaite (pour l’adapter a mon site) ainsi que les petites ?
    J’ai déjà modifié la taille de diapo_grand et diapo_petit dans le css, mais ca n’a pas eu l’effet souhaité.

    Existe-t-il aussi une petie documentation pour voir les possibilités de ce plugins ?

    Merci encore pour ce plugins

    • besse698

      J’ai cherché la même chose et j’ai fini par modifier le image_reduire de « diapo_grand » dans le fichier diapo_img.html qui se trouve dans \plugins\diapo_1_9

      A noter que la taille de l’image fixe qui s’affiche au 1er chargement de la page (la première de la série) dépend elle du filtre image_reduire de la balise TEXTE du squelette article.html

    Répondre à ce message

  • 2

    On peut modifier le fichier diapo.css et diapo.html en les plaçant respectivement dans le dossier squelettes et le dossier squelettes/modeles.

    Cependant pour jouer sur la taille des diapos, j’ai du modifier également le fichier diapo_img.html directement dans le dossier du plugin.

    Comment pourrais-je faire pour utiliser ce fichier dans le dossier squelettes plutôt que dans le dossier du plugin ? (j’aimerais ne rien toucher dans les fichiers d’origine )

    • normalement en en placant une copie dans /squelettes ca devrait marcher.

      Mais le mieux, ca serait de sortir les valeurs en parametre et de passer ces parametres dans le modele.

      @++

    • Il semble pourtant que le fichier diapo_img.html soit toujous pris dans le dossier du squelette. (J’y ai ajouter du etxte, vider le cache, mais mon texte n’apparait jamais !!)

    Répondre à ce message

  • 3
    dede

    bravo pour ce pluging , mais j’ai un petit soucis...
    le numero de l’article etant 29 dans le corps de l’article j’ai donc mis
    <diapo29>
    les boutons de positionnement des vignettes , le diaporama ne fonctionne pas.
    merci pour votre aide

    • la librairie jquery n’est pas chargée ???

      c’est quoi ce squelette ?

      Il manque #INSERT_HEAD ou alors jquery a été désactivé.

    • merci pour ton aide car je suis un peu novice et je bloque sur pas mal de petits problemes

      le squelette c’est Sarka Spip ;
      ou dois je mette #INSERT_HEAD et comment activer jquery

      merci encore +++

    • -  La balise #INSERT_HEAD (depuis SPIP 1.9.1) doit se situer entre les balises

      et

      de vos squelettes. Elle permet à SPIP, ainsi qu’aux plugins éventuels, d’ajouter du contenu entre ces deux balises html.

      (c’est dans la doc)

      si tu as un fichier /squelettes/inc-head.html, c’est surement la qu’il faut le mettre.

      Je ne connais pas sarka, désolé.

    Répondre à ce message

  • 1
    Renaud

    Bonjour,
    Je ne comprends rien, version SPIP 1.9.2a [8878], j’ai mis le fichier squelettes>modeles>diapo.html et j’ai ça qui s’affiche ... est-ce vous avez une idée ? Merci.

    <BOUCLE_docs_diapo>(documents)
Erreur MySQL
documents.id_document, 0+documents.titre AS num, documents.fichier, documents.titre, J1.mime_type, documents.descriptif FROM spip_documents_articles AS <span class="base64" title="PGNvZGUgY2xhc3M9InNwaXBfY29kZSBzcGlwX2NvZGVfaW5saW5lIiBkaXI9Imx0ciI+TDE8L2NvZGU+"></span>, spip_types_documents AS <span class="base64" title="PGNvZGUgY2xhc3M9InNwaXBfY29kZSBzcGlwX2NvZGVfaW5saW5lIiBkaXI9Imx0ciI+SjE8L2NvZGU+"></span>, spip_documents AS <span class="base64" title="PGNvZGUgY2xhc3M9InNwaXBfY29kZSBzcGlwX2NvZGVfaW5saW5lIiBkaXI9Imx0ciI+ZG9jdW1lbnRzPC9jb2RlPg=="></span> WHERE (L1.id_article = '4') AND diapo(8) AND (documents.id_type = J1.id_type) AND (documents.taille > 0 OR documents.distant="oui") AND documents.id_document=L1.id_document GROUP BY documents.id_document ORDER BY num
You have an error in your SQL syntax. Check the manual that corresponds to your MySQL server version for the right syntax to use near '(8) AND (documents.id_type = J1.id_type) AND (documents.taill
</BOUCLE_docs_diapo>

    • si ça marche ! Désolé pour la fausse alerte, juste un dérapage de brel !

    Répondre à ce message

  • Nickel ce plugin.
    Je suis débutant et je n’arrive pas à contrôler l’affichage de manière satisfaisante :
    -  Sur un site régler pour fonctionner en 800*600, si je positionne les vignette sur le coté, l’aperçu de l’image se fait en dessous des vignettes au lieu de se faire à coté (c’est un problème de taille que je n’arrive pas à régler)
    -  Sur l’affichage avec thickbox, comment je peut enlever les informations (image x/n et le lien s’occupant du diaporama)

    Merci d’avance pour toutes vos aide

    Répondre à ce message

  • 2
    Kaelya

    Bonjour,

    Tout d’abord un grand merci pour ce plugin.

    Mais j’ai un petit problème, il ne m’affiche pas que les images : voir ici.
    J’ai d’autres types de documents attachés à l’article (sons et zip) et à la fin des images je me retrouve avec les vignettes spip pour les sons et les zip. Y a-t-il un moyen d’éviter cela ?

    Merci

    • il faut ajouter un critere aux boucles DOCUMENTS du modele.
      sans doute {extension==gif|jpg|png|jpeg}

      @++

    • Kaelya

      Bonjour,

      J’ai essayé avec extension==gif ; jpg ; png ; jpeg et avec mode=image mais rien n’y fait, mes autres documents sont toujours là.

      Merci de votre aide.

    Répondre à ce message

  • 4
    coco

    C’est toujour bien quand les gars qui bossent partage leur travail. Mais vraiment y manque juste un petit tuto, même court, parce que c’est le bordel pour comprendre le fonctionement au travers des post.
    Moi, j’ai toutes mes images qui se chevauchent les unes sur les autres avec le petit menu de navigation à peine visible en dessous des photos.
    Probléme de vignettes ?
    C’est d’autant plus frustrant que le systéme est à mon avis exelent. Trés bonne idée et bon boulot.

    • Dakujeme

      Bonjour,
      je viens d’installer SPIP 1.9.2 derniere version.
      J’ai aussi correctement installé les plugins suivants DIAPO et Thickbox v2 dans le repertoire PLUGINS de SPIP. Je les ai aussi activés dans la console d’admin.
      Jusqu’ici tout va pour le mieux.

      Mais mon soucis est le suivant.

      Je creer un article avec du texte et des images.
      du genre :

      texte .....
      puis mon diapo avec 8 images
      < doc8 |diapo >

      Dans la console d’admin j’arrive correctement à voir le plugin fonctionner à merveille avec les jolies effets de transitions.
      Mais dès que j’utilise mon modele du genre :

      #CACHE10
      < BOUCLE_article (ARTICLES) id_rubrique = 1>
      #TITRE
      #NOTES
      #TEXTE
      < / BOUCLE_article >

      et beh une seule image s’affiche, mais pas de jolie plugins en vue.

      Voici l’adresse : http://positif94.free.fr/logiciels/spipositif/spip.php?page=actualite

      Dernier info j’ai bien cette ligne la dans le fichier inc-head.html :
      [(#REM) Balise permettant aux plugins d’inserer des appels javascript ou css ]
      #INSERT_HEAD

      Merci par avance pour votre aide.
      Cordialement Dakujeme

    • yann

      Bonjour, et bravo pour le plugin qui à l’air top. J’ai le même problème sous SPIP 1.9.2a, j’ai installé thickbox et diapo, désactivé tous les autres plugins (habillage et squelette dist), associé des images à l’article et mis le racourci type [<diapo2>]dans le texte de l’article et j’ai bien les miniatures dans la partie privée et publique mais dans la partie publique elles sont cachées sous deux grandes images à savoir 2 fois la première image associée...
      Et j’ai bien insert_head....
      Une idée ?? Merci pour votre aide.
      Pour le moment je tourne en local sous easyphp...doonc difficile de vous montrer l’erreur

    • yann

      Je précise que je suis donc maintenant après avoir désactivé tous les autres plugins, sous dist en fait...c’était pas clair dans mon post précédent...

    • yann

      oups g trouvé....j’avais oublié d’activer l’extension gd2 de easyphp....donc il ne créait pas les vignettes...
      Merci et encore super boulot.

    Répondre à ce message

  • Seb

    Bonjour,
    J’ai installé ce plug in (SPIP 1.9.1) avec les 2 autres nécessaires... Ca semble bien fonctionner sauf que je n’ai pas les jolis effets de transition d’une photo à l’autre. J’ai vu un post qui disait de modifier le diapo.js en partant de celui du site http://www.bourgogne-nivernaise.com/plugins... mais je n’ai pas réussi. J’ai même tenté de reprendre le script de ce site et de le coller dans le mien, ça n’a rien changé

    Ma page est ici :
    http://shascoat.free.fr/spip/spip.php?article22&var_mode=recalcul

    J’ai très probablement loupé un truc... Mais quoi ? :)
    Merci à toute personne qui aurait une idée.
    Sébastien

    Répondre à ce message

  • 1

    Bonjour

    j’obtiens un comportement un peu bizarre avec ce plugin :
    si je clique sur l’image le diaporama grisé se lance mais ne permet pas de voir que l’image courante en bas a gauche j’ai « 1/1 slideshow »

    pour voir les suivante en grisée, il faut fermer l’image cliquer sur une minature recliquer sur l’image pour l’obtenir un « 1/2 slideshow »

    pourquoi je n’obtient pas directement « 8/8 slideshow » si j’ai 8 images dans mon article ?

    Merci

    • Bonjour Ama Auvers,

      Quand je visite votre page, j’ai bien 7/7 dès la première image visionnée.

      Comment obtenez-vous cet effet, à savoir les vignettes sans la grande image, et qui s’ouvrent directement dans le diaporama.

      Je voudrais obtenir ce rendu, mais j’avoue que je ne sais pas par quel bout le prendre.

      Pour l’instant, j’ai les vignettes et la grande image qui change quand on clique sur les vignettes.

      Avez-vous modifié le modèle diapo.html ?

      Merci de votre aide.

      Fred (un autre que celui qui a déjà posté)

    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