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

  • 1
    tibo

    Très bien ce plugin.

    J’aurais voulu savoir s’il était possible d’inclure un diaporama directement dans un squelette (pour la page d’accueil par exemple)

    De plus j’aimerais bien pouvoir spécifier le numéro de l’article via une boucle SPIP du style :

    <BOUCLE_diapo(ARTICLES){titre_mot=Album}{0,1}{par hasard}>
  <DIAPO#ID_ARTICLE>
</BOUCLE_diapo>

    Je pourrais ainsi afficher sur la page d’accueil un diaporama choisi au hasard. Aurais-tu des pistes ?

    • bill

      Salut,

      le diaporama est un modele, tu peux donc l’utiliser dans les squelettes :

      <BOUCLE_diapo(ARTICLES){titre_mot=Album}{0,1}{par hasard}>
[(#MODELE{diapo}{id=#ID_ARTICLE}){align=left}]
</BOUCLE_diapo>

      pour passer en diapo automatiquement, {align=diapo} mais je ne pense pas que le diaporama demarre, il faut faire « lecture ».

      Si c’est le sommaire, tu dois pouvoir mettre le javascript de lancement dans le squelette : diaposlide(timeout)

      voila, voila...

      @++

    Répondre à ce message

  • 2
    lekoala

    Bonjour

    J’ai bien installé le plugin , il marche dans mon espace privé , j’ai bien l’image en grand et sa vignette . Toutefois, j’ai la même chose pour toutes les images. Dans mon espace public ..
    J’ai 2 images en grand ( taille de l’image ) mais pas ce que donne la galerie , je ne comprends pas . Je ne comprends pas ce qu’il faut installer en plus de ce plugin ? ou le trouver.
    Je travaile avec un mac et MAMP , j’ai SPIP 1.9.1

    Merci de m’aider

    Jérôme

    • bill

      Pas sur d’avoir compris le probleme, mais si ca marche dans /ecrire et pas sur le site, c’est qu’il doit manquer #INSERT_HEAD dans les squelettes (dans la /dist, il est dans inc-head).

      Cette balise doit etre dans le header.

      J’espere que c’est ca.

      @++

    • lekoala

      Bonjour

      merci de ton message , j’ai regardé et oui , je n’ai pas ça dans mon squelette .
      je ne sais pas ou l’ajouter .. je suis nul avec spip , je travaille dessus depuis qu’il n’y a plus les .php3 et oui, avec MAMP sur mac c’était dur.

      Dans mon espace privé , j’ai les images et les vignettes , les images en grand , l’une sous l’autre et les vignettes l’une sous l’autre , au dessus de la première vignette , j’ai un triangle et un lien pour lire le diaporama et sous la dernière grande image , j’ai son lien et le chemain en erreur en plus.

      dans l’espace public, j’ai tout en grande taille et en double 3 images = 6 grandes.
      et une sous l’autre

    Répondre à ce message

  • 2
    marc.bru

    Je découvre tout juste Spip. J’ai réussi à l’installer et à mettre un squelettes qui s’appelle « Alternatives ». J’ai installé aussi JQuery. Tout est activé.
    Ensuite j’ai installé le plugin Diapo et là .... tous se brouille lol
    Je ne comprends plus rien !!!!
    Je fais quoi avec le fichier diapo.html ? Je met ou le HEADER ? Bref, je suis largué de chez largué !!!
    Si vous pouviez me guider pas à pas ça m’arrangerait bien !!!!
    Merci à vous.
    ps : le résultat est quand même génial sur le site du developpeur !!!

    • bill

      hello,

      ben, en fait, c’est un plugin, donc il n’y a pas grand chose à faire... si ce n’est l’installer (mettre le contenu du zip dans plugins/diapo/ et aller dans la configuration de spip=> gestion des plugin cocher la case et valider)

      Normalement, pas grands changements, si ce n’est ce nouveau raccourci disponible dans les contenus (texte) : <diapoX|left> ou X est le numero de l’article contenant les photos (documents associés à l’article)

      Que dire de plus... regarde l’article de Cedric sur le sujet.

      @++

    • marc.bru

      Salut Bill,

      j’ai bien mis le plugin à sa place et dans l’article j’ai bien rajouter diapoX avec X le n° de l’article dans lequel j’ai joints les photos.
      Je me retrouve avec une page assez mer....ique, contenant les 8 vignettes en haut à gauche de ma zone de publication et la photo de taille intermédiaire juste dessous.
      Lorsque je clique sur le bouton de lecture du diaporama rien ne se passe ...

      Comment faire pour chiader la mise en page ? J’ai lu qu’il fallait la balise HEADER : ou la mettre, sachant que j’utilise le squelettes ALTERNATIVES.
      Merci.

    Répondre à ce message

  • 1
    john

    Bonjour je cherche à appliquer les effets du plugin diapo ici : http://www.intranet-kerplouz.com/site/spip.php?article63

    squelette de l’article : http://www.intranet-kerplouz.com/site/squelettes/article.html

    version spip svn et version plugin svn aussi.

    Mais ce que j’obtiens est loin du résultat que l’on peut obtenir ici et que je recherche : http://famille.saidebias.free.fr/spip.php?article42

    Merci de m’aiguiller .

    • bill

      Mais ce que j’obtiens est loin du résultat que l’on peut obtenir ici et que je recherche : http://famille.saidebias.free.fr/spip.php ?article42

      heu, ca, c’est thickbox, c’est pas le plugin diapo.

      Sur Bourgogne-nivernaise, j’ai mis tickbox en plus, mais le plugin diapo, c’est un genre de portfolio (donc, en general, on ne met pas de boucle document dans le squelette) avec pagination et un mode diaporama.

      regarde donc plutot du coté de tickbox (v2 maintenant je crois)

      @++

    Répondre à ce message

  • Patrick

    Bravo pour ce plugin.
    Je suis en train de le mettre en place, pour l’instant en local avec la 1.9.2.beta3.
    Mais comme je suis débutant sur la manipulation des codes, j’ai quelques soucis.
    Ainsi, je n’arrive pas à obtenir l’équivalent de ce qui est en place sur le site du Pays Bourgogne-Nivernaise.

    Dans mon essai, j’ai 2 colonnes verticales de vignettes au dessus de la grande image en bas.
    De plus, sur le site précité, lorsque l’on clique sur la grande image, celle-ci s’ouvre en format 100% dans une fenêtre séparée et je n’ai pas trouvé comment arriver à ce résultat.
    Pourriez-vous me guidez s’il vous plaît.
    Merci
    Patrick.

    Répondre à ce message

  • 4
    orcieres

    Comment et où installer JQuery ?
    merci pour votre aide

    Jean

    Répondre à ce message

  • 1
    francois

    Bonjour Bill et bonne année

    Bravo pour ton plugin simple d’utilisation mais bon comme les autres j’ai aussi un petit probleme
    je suis sur spip 1.9.1, j’ai installé jquery et tickbox. A part diapo je n’ai pas d’autre squelette j’ai la version de base
    Mon probleme c’est que le porte folio que géner spip de base est toujours present sous le diaporama

    l’adresse de mon site : http://famille.saidebias.free.fr/spip.php?article32

    Merci

    • Hugues

      J’ai eu le même problème. J’ai simplement enlevé la partie code portfolio du squelette et maintenant ça fonctionne.

    Répondre à ce message

  • 3
    rabe

    Très joli plugin mais sur le site
    http://www.bourgogne-nivernaise.com/Album-photo.html
    j’ai noté des problèmes de mise en page sous IE6 Windows :
    -  quand les vignettes sont à droite, la photo est en dessous
    -  quand les vignettes sont en haut, la photo n’apparaît pas.

    Déjà vu ?
    Ces problèmes ne sont pas là sous FireFox 2.0

    A+

    Raphaël

    • bill

      zut !

      Je n’ai pas ces problemes ni sous IE6 ni sous FF1.5 avec windows XP et personne ne me l’a signalé encore.

      Quel est ta config ?

      j’ai fait une petite modif dans le css (+effet de transition), peux tu me dire si ca regle le probleme ?

      Merci.

    • sgtpepper

      Moi aussi je suis séduis par cette contribution. Bravo.

      Je constate aussi sur ton site ce 13 décembre 2006 16h00 que la photo grand format se place en dessous des 6 miniatures que ce soit sur IE6 windows xp sp2 ou IE6 windows xp sp1 et non pas à côté comme avec un navigateur moderne comme par exemple FF... :-)

    • bill

      oui, ca y est, j’ai pu reproduire et essayer de réparer.

      Mais c’est pas encore le top, il faut que je regarde cette feuille de style....

      Merci.

    Répondre à ce message

  • 1
    psychoblum

    Fonctionnalité qui semble très intéressante mais pouvez-vous détailler davantage l’utilisation du plugin ? Pas de souci pour l’installation de celui-ci, mais je ne saisis pas bien ce qu’il faut faire avec le raccourci typographique. Pourriez vous donner un exemple concret ?

    Merci beaucoup.

    • bill

      ben, je ne sais pas quoi dire de plus...

      Dans le texte d’une breve ou d’un article, tu peux mettre <diapo12|center>, ce qui insert la galerie des photos de l’article 12.

      Pour l’exemple, regarde le site Bourgogne-Nivernaise, le texte de l’article, c’est :

      L'album photo vous propose de découvrir le Pays Bourgogne Nivernaise en images. Si vous souhaitez utiliser une de ces images pour une publication, merci de nous en informer, nous vous mettrons en relation avec les ayants-droits.

Vous pouvez choisir différentes présentations {(le menu s'affiche au survol des boutons)}:
- agrandir l'image
- vignettes à droite ou à gauche
- mode diaporama.

<diapo150|right>

      c’est plus clair ?

      @++

    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