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

  • 6

    C’est re-moi, pour dire que lorsque je clique sur une autre photo, elle ne s’affiche pas en grand...
    Sur Firefox mozilla, cela marchait et là sur IE il m’affiche la première image en grand, ok, mais une autre, il ne veut pas ???
    Ah les mystère de l’informatique...

    • alors, tu as encore un probleme de reglage (diapo_petit est trop grand pour afficher 2 vignettes en plus).

      le plus simple, c’est de laisser le plugin faire ses reglage en ne lui fournissant que diapo_grand

      sinon pour ton lecteur, float:left ou position absolute... il faut choisir.

      @++

    • probleme de reglage (diapo_petit est trop grand pour afficher 2 vignettes en plus). le plus simple, c’est de laisser le plugin faire ses reglage en ne lui fournissant que diapo_grandJe ne saisis pas cela....désolé ?
      Peux-tu être plus précis ?
      J’ai placé 5 vignettes, et la première photo s’affiche correctement.
      Lorsque je clic sur une autre vignette, la photo doit changer, mais là, la dernière disparaît, et c’est tout.
      Pourtant tout cela fonctionne avec Firefox. Le problème vient de l’affichage sous IE.
      merci de ton aide

    • http://orchestreleonbarzin.fr/spip.php?article22&var_mode=recalcul
      sous IE, cela ne fonctionne pas, aurais-je oublié qqch ?
      Merci de votre aide

    • quel OS, quelle version d’IE et qu’est-ce qui ne marchepas ?

      sous XP avec IE7, ca marche (manque un nettoyeur avant le pied de page dans le squelette mais diapo marche bien)

    • Et bien, lorsque je clic sur une vignette du centre elle ne s’affiche pas. Les vignettes des extrémités, elles s’affichent en grands, la-dessus no problemo, bizarre bizarre !
      Tu dis que ça marche chez toi ?
      Moi, je suis sous XP Sp2,
      et IE7.0.5730.13

      Et tu me parle d’un nettoyeur ?c’est quoi ? Dois-je rajouter qqch ?(un poisson lèche vitre ?)hihi

      Merci

    • bon, alors, la « vignette du centre », j’imagine que c’est l’image (grande ou petite selon qu’on est en affichage diapo/vignettes en haut ou vignettes à droite/gauche).

      Quel que soit l’OS et le navigateur, quand je clique desus, ben... l’original s’affiche.

      c’est ce que fait le plugin diapo.

      Mais je subodore que tu es en fait en train de parler de tickbox, c’est ca ?

      si oui, il faudrait peut etre mettre thickbox...

      sinon, un nettoyeur, c’est un truc (br ou div avec un seul espace) en position:relative ;clear:both ; pour que ton pied de page ne soitpas superposé avec le diapo

      @++

    Répondre à ce message

  • Rectification, DESOLE
    Cela fonctionne, je n’avais pas vu les petites icônes, lecture pause, vign à gch, vig à drt, vig au dessus...
    Y-t-il moyen de changer la couleur de ce mini menu d’ailleurs ?

    Bon, j’ai toujours le souci de mise en page du lecteur dewplayer.

    As-tu une idée ?

    Merci.

    Répondre à ce message

  • Tout d’abord merci de ton aide...
    On avance ,merci, j’avais mes vignettes verticales...donc j’ai fait comme tu m’as dit, j’ai ajouté #INSERT_HEAD dans article.htm
    Maintenant, il n’y a plus de banderole avec les vignettes...Et cela me fait un diaporama qui défile tout seul...pourquoi pas, mais j’aurais souhaîté que le visiteur puisse choisir lui-même les vignettes pour les voir en grandes images.
    Vois le résultat
    http://orchestreleonbarzin.fr/spip.php?article22&var_mode=recalcul

    Et cela me mets un bug dans la mise en page du lecteur dewplayer en haut à gauche...
    Mais ça avance...
    Merci de ton aide

    Répondre à ce message

  • 1

    Excuse moi, je suis un peu nul en ce jargon ...
    #INSERT_HEAD jquery...c’est du chinois pour moi...
    Peux- tu me détailler, STP ?
    C’est à dire que je dois inclure #INSERT_HEAD dans ma page html ????
    Si c’est le cas, à quel endroit, car, je viens d’essayer, mais, même résultat...
    http://orchestreleonbarzin.fr/spip.php?article22&var_mode=recalcul
    Merci de m’aider.

    • c’est quoi ton squelette ?

      il doit contenir #INSERT_HEAD comme le squelette /dist (dans inc-head.html)

      ca permet à spip d’inserer l’appel à jquery et aux plugins de poser leurs petites affaires (comme un css ou un js...)

    Répondre à ce message

  • Petite info sup :
    J’utilise spip version 1.9.2d
    Avec les pluigins suivants :
    Lecteur multimedia flash
    Spip List
    et donc diapo
    Que dois-je faire avec de jquery js...
    Merci

    Répondre à ce message

  • 1

    Ce plugin est très plaisant que j’ai un souci récurent : un clic sur vignette provoque le rechargement de la page mais sans changement de la « grande image » sauf si je demande le recalcul de la page (var_mode=recalcul)... Une piste pour régler ça ? [SPIP 192e/plugin diapo 1.9 release 20943]

    Répondre à ce message

  • 1

    Bonjour à tous,
    quelqu’un a -t-til une solution à mon problème ?
    Ce plugin m’affiche les vignettes en verticale, même lorsque je lui indique de les mettre en horizontal....
    Voici ma page...
    http://orchestreleonbarzin.fr/spip.php?article22&var_mode=calcul

    Est-ce un conflit ? Dans ce cas, que puis-je faire ?
    Utiliser un autre plugin pour mes photos ?
    Merci de votre aide...

    • il manque #INSERT_HEAD dans le squelettes => pas de jquery, ni le js et le css de diapo

    Répondre à ce message

  • Les balises <docXX|diapo> du diaporama et <docXX|player> du lecteur multimedia entrent en conflits et ajoutent des images dans les articles multimedia rendant inexploitables l’’un et l’autre.

    Constaté avec la version SPIP 2

    Répondre à ce message

  • Personne ne sait à ce propos : mes vignettes se placent toutes verticales
    Merci de votre aide

    Répondre à ce message

  • wondernono

    Au secours,
    Qui peut m’aider, je ne peux plus rentrer dans le backoffice spip
    il m’indique ceci...
    Fatal error : Call to undefined function : lire_config() in /homepages/5/d135995445/htdocs/plugins/extension_multilingue_pour_BTV2/extension_multilingue.php on line 438
    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