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

  • Abdoul Aziz

    Bonjour
    J’utilise SPIP 1.9.2c avec les Squelettes alternatives. J’ai nstallé votre Pulgin qui fonctionne sauf que l’affichage n’est pas correcte. La petite image se trouve en dessous des vignettes dans le Diapo guauche et droit.Dès que je crée le fichier de configuration le contenu textuel de les articles disparait.
    Merci d’avance

    Répondre à ce message

  • 5
    Samuel

    Bonjour,

    Tout d’abord merci pour ce plugin !
    j’ai toutefois deux petits problèmes. (SPIP 1.9.3)
    J’ai beau insérer les variables

    $GLOBALS['diapo_grand']=400;
$GLOBALS['diapo_vignette']=70;
$GLOBALS['diapo_petit']=350;

    (et les faire varier)

    dans mon fichier mes_fonctions .. rien n’y fait grandes ou petites images ne changent pas de taille.

    D’autre part les vignettes n’affichent pas la « vue » de la photo.

    Visible ici :

    http://bellithon.medicalistes.org/spip.php?article54

    (C’est pas du grand art mais ce n’est pas le but recherché ...)

    Merci de votre aide,

    Samuel

    • Samuel

      Problème vignette résolu ... erreur de débutant, celà fait à peine 3 semaines que je découvre spip ... reste les tailles d’images ...

      Merci encore du coup de main..

    • Samuel

      Bon je suis vraiment nul ...

      Un bon vidage de cache et le tour est joué.

      Désolé pour le drangement,

      Bonne fin de dimanche à tous,

      Sam !

    • roino

      bonsoir,
      puisque tu as trouvé, où inscrire ces données ?
      $GLOBALS[’diapo_grand’]=400 ;
      $GLOBALS[’diapo_vignette’]=70 ;
      $GLOBALS[’diapo_petit’]=350 ;
      En sachant que je n’ai pas de fichier mes_fonctions.php dans mon squelette.
      Ensuite, biensûr, je vide le cache ;-)
      merci d’avance

    • si tu n’as pas de fichier mes_fontions.php, tu n’as qu’à en créer un...

      tu mets dedans :

      <?php

$GLOBALS[’diapo_vignette’]=70 ; 

$GLOBALS[’diapo_petit’]=350 ;

?>
    • roino

      Bah non, en respectant ce que tu avais déja écrit, j’avais déjà fait tout ça : créer un fichier mes_fonctions.php avec les variables désirées et en jouant avec, vider le cache. J’ai même quitté FireFox, vider le cache de l’ordi avec Ccleaner : Rien. J’ai même rebooter l’ordi (au cas ou) : rien. (je travaille en local pour l’instant).
      Mon problème est que j’ai bien les vignettes, la grande image, mais il me manque les icones qu’on trouve généralement au-dessus du diaporama. de plus, le diaporama ne fonctionne pas (il faut cliquer sur les vignettes afin d’avoir les grandes images).
      Le problème est que les éléments visibles sortent de mon bloc article et viennent au-dessus des autres blocs.
      Une petite idée quelqu’un ?
      Merci d’avance

    Répondre à ce message

  • 6
    roino

    Comment faire pour l’activer au sein de l’article ? J’ai effectivement installé le plugin, puis je l’ai initialisé via la gestion des plugins, mais que faut-il faire pour le faire fonctionner dans l’article ? Mots-Clés ? Nouveau bouton apparu ?
    Merci de votre réponse.

    • merci de lire l’article avant de poser des questions.

      c’est un raccourci typographique, il faut donc le mettre dans le texte.

    • roino

      Désolé, j’ai bien lu re-lu et re-re-lu le texte du message, mais je ne comprends pas quelle opération il faut faire. J’ai même bien placé ce raccourci typo dans mon texte, mais ça n’a rien changé : les photos n’apparaissent pas.
      Si quelqu’un était en mesure de m’aider. Je viens juste de passer sous spip 1.9.2 et j’en perds mon latin et ma logique de mise en page spécifique. Après 2 jours de recherche concernant ce problème, j’aimerai qu’une gentille personne attentionnée m’explique le fonctionnement de façon plus précise.
      Merci d’avance à celui qui prendra le temps de me répondre.

    • -  activer le plugin
      -  mettre d’ans le texte de l’article X
      -  faire « voir en ligne »

      normalement, c’est tout.

      il faut peut etre vider le cache de Spip et celui du navigateur ?

      Le seul truc qui peut manquer, c’est #INSERT_HEAD dans le squelette, c’est quoi comme squelette ?

      Il y a moyen de voir une page article avec un diapo qui ne marche pas ?

      @++

    • roino

      Effectivement, je crois que le problème vient de la balise #INSERT_HEAD qui
      n’apparaît pas dans mon squelette (Choros). J’ai bien tenté de l’y inscrire,
      mais, alors, une ligne d’erreur de la structure apparaît sur les pages
      rechargées. Je crois que c’est un problème récurrent d’après les forums que
      j’ai consultés. Peut-être avez-vous une idée.

      Pour info, le site est le suivant : http://royneau.pierre.free.fr - Le
      premier article « test » devrait renvoyer l’interface adéquate dans le Front
      Office. Pourtant, il n’y a rien, même pas les 2 images que j’ai téléchargées
      via le Back Office.

      Merci du temps pris à me répondre.

    • bill

      alors deja, il y a un souci avec un inclure (bandeau ?) qui est une page (avec debut et fin html) inséré dans le header de la page.

      Ensuite INSERT_HEAD doit bien etre present puisqu’il y a jquery et diapo.js.

      Par contre, il n’y a pas l’air d’y avoir de #TEXTE ???

      en mettant du texte avant et après le raccourci diapo, ca donne quoi ?

    • bill

      et en remplacant (#TEXTE par [(#TEXTE)] dans /squelettes/article.html, ca marche mieux ?

    Répondre à ce message

  • 1
    Abdoul

    Je vient d’installer et activer le Plugin Diapo mais je n’arrive pas à l’utiliser. Comment l’utilise ton ?
    Merci

    • rticle

      merci de lire l’article avant de poser des questions.

      c’est un raccourci typographique, il faut donc le mettre dans le texte.

    Répondre à ce message

  • 2
    Abdoul Aziz

    Bonjour
    Je veut choisir parmis les trois versions(Diapo v1, Diapo v2 et Diapo stable) de Diapos mais il faut me les expliquer.

    Merci d’avance

    Répondre à ce message

  • 2
    DojoCoueron

    Bonjour,
    Le plugin fonctionne bien : nickel.
    Mais j’ai une question de débutant (sic) : le plugin affiche toutes les photos déjà chargées dans un article XX (notamment sous forme de documents attachés), alors comment- fait-on pour n’afficher les photos que via le plugin et pas dans l’article.
    Merci.

    • Il faut modifier le squelette article pour ca :

      -  supprimer BOUCLE_documents_portfolio
      -  supprimer BOUCLE_afficher_document
      -  ajouter à BOUCLE_documents_joints le critère {extension IN png,jpg,gif}

      @++

    • bill

      je voulais dire :

      -  supprimer BOUCLE_documents_portfolio
      -  supprimer BOUCLE_afficher_document
      -  ajouter à BOUCLE_documents_joints le critère extension !IN png,jpg,gif

      @++

    Répondre à ce message

  • 1
    JLuc

    Bonjour,

    Je suis désolé, mais tant avec firefox qu’avec explorer, le #pagination_docs n’est pas stable, et à chaque nouvelle diapo qui défile, la position de l’écran saute en haut si bien qu’on ne voit plus la diapo (ou on voit juste le haut).

    C’est en tout cas ce qu’on constate sur le site bourgogne Nivernaise donné en exemple !!!

    Je sais pas quoi faire...

    Répondre à ce message

  • Bonjour

    Le plugin est installé et fonctionne très bien merci.

    J’aimerais maintenant faire apparaître le texte (inscris dans article/portfolio/description) dans un rectangle à droite de la photo.

    J’ai fait quelques tentatives de modification dans diapo.css.html et

    [

    (#DESCRIPTIF)

    ] mais cela ne fonctionne pas.

    Merci

    Répondre à ce message

  • 3
    Arnaud

    bonjour,

    au risque de paraitre bizarre, je n’arrive pas à faire fonctionner ce plugin !!!
    ca a l’air tellement simple que j’en suis déconcerté !

    y’aurait t’il des pré-requis niveau plugins qui m’auraient échappés !!!
    j’utilise thickbox V2 !!

    pour ma config je suis sur Spip 1.9.2c [12268].

    j’ai tenté de retirer tous les plugins dont je disposais, mais rien n’y fait, il ne se passe rien du tout sur mon site !!!

    • François

      Bonjour,

      J’ai le meme problème, même configuration.
      Impossible de faire apparaitre les boutons de navigation du diaporama. Les images s’affichent en vignettes, la première en grand et c’est tout.
      Il n’y a que le thickbox qui fonctionne. (avec ou sans le plugin diapo, donc)
      MErci de m’éclairer...

    • ils sont visibles en ligne vos sites qui ne marche pas ?

      sans doute un probleme de jquery ou de INSERT_HEAD, mais il faut voir.

      pensez bien à vidervotre cache entre 2 essais,y compris pour desactiver/reactiver des plugins

      @++

    • Non mon site est encore en local.
      J’ai bien vidé le cache. essayé de mettre l’un plugin puis l’autre. rien ne change.
      JE communiquerai l’adresse du site des que possible.
      Merci

    Répondre à ce message

  • Kaelya

    Bonjour,

    Tout d’abord merci pour ce plugin que je trouve vraiment très bien.

    J’ai juste une petite question, comment dois-je faire pour surcharger proprement la feuille de style ? J’ai essayé de mettre un fichier diapo.css dans squelettes et j’ai aussi essayé avec un fichier diapo.css.html mais ça ne marche pas.

    Merci de votre aide

    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