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
    Patrick

    Bonjour,

    Dans inc-documents.html de mon squelette, je viens de placer ce code avec un spip 212

    [(#REM) Portfolio : album d’images ]

<B_documents_portfolio>
<div id="documents_portfolio">
        <h2>Galerie photos</h2>
        #ANCRE_PAGINATION
<BOUCLE_documents_portfolio(DOCUMENTS) {id_article} {mode=document}{extension IN png,jpg,gif} {par titre, date}{pagination 8}{doublons}{vu=non}>[
        <a href="(#URL_DOCUMENT)" type="#MIME_TYPE" onclick="location.href='[(#URL_ARTICLE
                |parametre_url{id_document,#ID_DOCUMENT}
                )]#documents_portfolio';return false;"[ class="(#EXPOSER)"][ title="(#TITRE|attribut_html|couper{80})"]>[(#FICHIER
                |image_reduire{0,120}
                |inserer_attribut{class,spip_logos}
                |inserer_attribut{alt,[(#TITRE|attribut_html|couper{80})]})]</a>
        ]
        </BOUCLE_documents_portfolio>
[<p class="pagination">Suite des documents ici:&nbsp;&nbsp;&nbsp;(#PAGINATION)&nbsp;&nbsp;&nbsp;</p>]
</div>
</B_documents_portfolio>

    lignes 1 à 17, il remplace ainsi avec mediabox le plugin diapo, à partir des images placées dans le portfolio.

    Visible ici

    • Patrick

      suite et mise au point ... Utilisateur depuis longtemps de diapo, mon intention n’est pas de le dénigrer, mais je fais part d’une idée qui pourrait peut être faire avancer vos recherches...

    Répondre à ce message

  • 2
    André PILLON

    Bonjour,
    J’utilise SPIP 2.1.0 j’ai téléchargé, installé dans mon dossier plugins et activé la version diapo_1_9zipff06.zip (décompressé bien sûr)
    La méthode de fabrication est bien gd2
    la case générer les miniatures est cochée (150pixels)

    Je ne trouve pas le nouveau raccourci typographique  !!!
    Qui si j’ai bien compris est situé dans la barre typo de l’article

    En P.J. impression d’écran de la barre typo
    As-tu une suggestion ?
    Mon site http://paroissesenartnord-meaux.cef.fr/ existe depuis 2005
    Je suis en train de le relooker en local avec escal
    C’est à cette occasion que le diapo m’intéresse utilisant easy-php qui ne prend pas en charge les vignettes gd2, j’ai fais l’essai sur le site actif

    • toto21

      En substituant la boucle dans le fichier "plugins/diapo_1_9/modeles/diapo.html comme suit :

      <?php $i = 0 ?>
<BOUCLE_docs_diapo(DOCUMENTS){id_article}{extension IN png,jpg,gif}{pagination () #ID_ARTICLE}{par num titre, titre, id_document}>
<?php $i++ ?>
<?php if ($i < 2): ?> 
<img class="diapo_loading" alt="<:diapo:loading:>" style="display:none" src="[(#CHEMIN{'img_pack/loading.gif'})]"/>
<div class="diapo[ (#ENV{align}|match{right|left}|?{'diapo_petit','diapo_grand'})]">
<a href="#FICHIER"[ title="(#TITRE|supprimer_numero|texte_backend)"] type="#MIME_TYPE">
<img class="diapo_petit"[ style="(#ENV{align}|match{right|left}|?{'','display:none'})"] src='[(#FICHIER|image_reduire{#DIAPO_GRAND,#DIAPO_GRAND_H}|extraire_attribut{src})]' height='[(#FICHIER|image_reduire{#DIAPO_PETIT,#DIAPO_PETIT_H}|hauteur)]' width='[(#FICHIER|image_reduire{#DIAPO_PETIT,#DIAPO_PETIT_H}|largeur)]' alt='[(#TITRE|supprimer_numero|texte_backend)]' />
<img class="diapo_[(#_art:ID_ARTICLE)]_[(#COMPTEUR_BOUCLE)] diapo_grand"[ style="(#ENV{align}|match{right|left}|?{'display:none',''})"] src='[(#FICHIER|image_reduire{#DIAPO_GRAND,#DIAPO_GRAND_H}|extraire_attribut{src})]' height='[(#FICHIER|image_reduire{#DIAPO_GRAND,#DIAPO_GRAND_H}|hauteur)]' width='[(#FICHIER|image_reduire{#DIAPO_GRAND,#DIAPO_GRAND_H}|largeur)]' alt='[(#TITRE|supprimer_numero|sinon{[(#FICHIER|)]})]' />
</a>
[<h3>(#TITRE|supprimer_numero)</h3>]
[<p>(#DESCRIPTIF)</p>]
<?php endif; ?>
</div>
</BOUCLE_docs_diapo>

      Cela fonctionne « empiriquement » ;) sur SPIP 2.1.2 [16017]

    • André PILLON

      Ben ! Je ne suis pas doué ça ne marche pas !
      Ci-dessous
      C :\Program Files\EasyPHP1-8\www\plugins\diapo_1_9\modeles\diapo.html
      Après modif
      -  J’ai certainement fais une erreur quelque part ?
      -  Avec un grand merci
      -  André

      BOUCLE_art(ARTICLES)id_article=#ENVid>
      #SETnb_vignettes,#DIAPO_VIGNETTES

      [ (#ENValign|choixsiegal’pause’,<:diapo:ico_diapo_pause :>,<:diapo:ico_diapo_play :>)] <:diapo:ico_right :> <:diapo:ico_left :> <:diapo:ico_center :> [(#ANCRE_PAGINATION)] [
      (#PAGINATION)

      ]

      [
      (#COMPTEUR_BOUCLE})]#pagination#ID_ARTICLE"[ title="(#TITRE|couper{80}|texte_backend)"]> (#LOGO_DOCUMENT||image_reduire#DIAPO_VIGNETTE,#DIAPO_VIGNETTE_H|inserer_attributalt,[(#TITRE|couper80|texte_backend)])

      ]


      [(#REM) Attention bidouille :
      -  critere diapo avec meme pas que pagination
      -  meme nom de boucle + 6 caracteres(_diapo)
      => il faudrait sans doute surcharger pagination...]
      1. 
      <?php $i = 0 ?>

      2.

      3.

      <?php $i++ ?>

      4.

      <?php if ($i < 2): ?>

      5.
       style= »display:none« src= »[(#CHEMIN’img_pack/loading.gif’)]"/>
      6.

      7. 8. [(#TITRE|supprimer_numero|texte_backend)] 9. [(#TITRE|supprimer_numero|sinon{<abbr title=")">(#FICHIER</abbr>})] 10. 11. [

      (#TITRE|supprimer_numero)

      ]
      12.
      [

      (#DESCRIPTIF)

      ]
      13.

      <?php endif; ?>

      14.

      15.

      s_diapo>


    Répondre à ce message

  • gibusm

    Merci à Bill pour son plugin,

    Je ne suis spécialiste, ni de SPIP, ni de programmation.
    N’ayant pas trouvé de solution sur le web pour la 2.1.1 j’ai tenté sans succès de résoudre le PB.
    En pis aller, et en attendant une vraie solution ?, je propose de remplacer : « diapo (#GETnb_vignettes) #ID_ARTICLE » par : « document=1 », dans « Plugins/diapo_1_9/modeles/diapo.html » en ligne 28 . Cela rend le plugin fonctionnel et à pour inconvénient de toujours afficher en grand format la première image du diaporama quelque soit la page affichée.

    Répondre à ce message

  • csteph77

    Bonjour,

    J’aime beaucoup ce plugin mais je voudrais y ajouter un effet de transition en fondu car actuellement c’est un peu brut. Quelqu’un pourrait-il me dire comment faire ?
    Merci d’avance.

    Stéphane

    Répondre à ce message

  • 1
    Arnaud

    Je suis en SPIP 2.1.0 [15608] et la version 0.6 [16473] de ce plug-in. Il ne semble pour l’instant pas compatible avec SPIP 2.1.0 car j’obtiens le message d’erreur suivant :

    Fatal error : Call to undefined function BOUCLE_docs_diapohtml_8052b55fdc567f53a47b93eb9c16f405() in /var/www/spip/diplonet2/ecrire/public/composer.php(69) : eval()’d code on line 148

    Any idea ?

    Merci.

    Répondre à ce message

  • 1
    balou

    Bonjour,

    Avez vous prévue une adaptation du plugin pour Spip 2.1 ?

    Cordialement

    • gazgaz

      Ya t’il compatibilité entre ce plugin et spip 2.1.0 avec SqLite3 ?

    Répondre à ce message

  • 2
    Einucent

    Bonjour. j’utilise le plugin sur MXL87 (qui est resté en 1.9.2d). Je me suis rendu compte récemment en légendant certaines images (je parle de l’interface « normale » de SPIP) que les champs Titre et Texte étaient prévus pour s’afficher sous la grande image du diaporama, Cool !

    J’apprécie ce plugin parce qu’il me permet d’associer des images à un article et de faire afficher la même galerie dans les version traduites. Je me suis donc dis qu’il me suffisait de rentrer mon

    <multi>[oc_lms]títol[fr]titre[en]title</multi>

    entre balises adéquates pour que le tour soit joué.

    Rien à faire : dans les traductions de l’article, le seul titre qui s’affiche est le premier (l’occitan est la langue par défaut du site), ça vaut aussi pour la thickbox. C’est dû au plugin ou à SPIP ?

    • bill

      Alors, comme c’est un modèle, il ne connait pas le contexte et donc, pas la langue...

      Par contre, rien ne t’empêche de la lui préciser à l’appel du modèle :
      -  dans ton article en anglais : <diapo12|left|lang=en>
      -  dans ton article en francais : <diapo12|left|lang=fr>
      -  dans ton article en occitan : <diapo12|left|lang=oc>

      A lèu

    • Einucent

      Ò paure !
      Je crois me souvenir avoir déjà tenté un truc du genre mais peut-être bien avec juste <diapo12|right|fr>
      Je viens d’essayer avec la synthaxe que tu indiques et ça suffit toujours pas. Y compis avec <span lang="fr"><diapo92|right></span>

      Hier soir j’ai essayé la piste du modèle ; en le surchargeant dans /squelettes/modeles/diapo.html :

      <span lang="#LANG">
[(#TITRE)]
[(#DESCRIPTIF)]
</span>

      et

      <span lang="#ENV{lang}">
[(#TITRE)]
[(#DESCRIPTIF)]
</span>

      Ça marche pas non-plus.
      Il existe un filtre du genre [(#TITRE|lang{#LANG})] ? Parce que j’ai essayé et ça marche pas non plus mais peut-être j’emploie pas les critères comme il faut.

    Répondre à ce message

  • 5
    brujacris

    Je viens de faire les deux (methode création vignettes et actualisation à 2.0.10), et ça marche pour les petites vignettes mais la photo principale reste dans la même taille... :-(

    J’ai remarqué que, dans l’espace privé, ça marche correctement...
    http://www.berrospe.es/spip/?-Fotos-

    • Alors la, je seche...

      est-ce que le squelette d’article applique un image_reduire à #TEXTE ?

      est-ce que les images ne seraient pas trop grosses pour etre traitées par le serveur ?

    • brujacris

      Bonsoir !
      Résolu ! Je pense que c’était la taille originale des photos car elles étaient trop grosses. Je las ai reduites avant de les télécharger et ça marche niquel, merci !!!

    • brujacris

      C’est encore moi... Maintenant j’ai des problèmes en un autre site, avec l’affichage de la galerie, les boutons ne apparaisent pas...

      http://www.recumadrid.es/spip/?Mueble-de-salon,3

      Merci !!

    • bill

      tu dois avoir un truc pas net avec ton htaccess car la feuille de style du plugin ne passe pas :
      http://www.recumadrid.es/spip/?page=diapo.css

      @++

    • brujacris

      Oui ! C’était ça ! J’ai pas arrivé a resoudre le problème du .htacess (je ne sais pas pourquoi) mais j’ai appelé directement la css dépuis inc-head et ça marche niquel.
      Merci !

    Répondre à ce message

  • 1
    brujacris

    Bonjour,
    Je viens d’installer ce plugin avec SPIP 2.0.9 et j’ai deux problèmes :

    -  La première image prends la taille correcte, mais les suivantes restent avec la largeur originale.

    -  Il n’y a pas des vignettes a droite comme il faudrait, mais l’icone SPIP pour les images.

    Je ne sais pas qu’est ce qui se passe, j’ai mis le #INSERT_HEAD dans inc_head et essayé un peu toutes les solutions dans ce forum, mais j’arrive pas a résoudre le problème.

    Voici la page :
    http://www.berrospe.es/spip/?Fotografias-del-Berrospe

    • 1- selectionner la méthode de fabrication des vignettes dans la configuration de Spip (/ecrire/ ?exec=config_fonctions)
      2- passer en spip 2.0.10 car il y a un bug avec la pagination en 2.0.9

    Répondre à ce message

  • 1
    zubrow

    bon j’ai encore un petit souci, j’ai modifier la taille des images en 750px au lieu de 500px dans diapo_fonctions.php (testé aussi avec un fichier mes_fonctions). Donc quand j’ouvre la page avec le diapo, la première photo reste en 500px, mais si je clique sur une autre photo, elles sont bien 750px, meme si je reclique sur la première, elle s’affiche bien en 750px.
    D’où peut venir ce bug ? un autre fichier à modifier ?
    merci de votre aide !

    exemple : http://bison.zubrow.free.fr/labelcouture/spip/?exemple-article-contact

    • paolo

      Donc quand j’ouvre la page avec le diapo, la première photo reste en 500px

      Salut, je voulais regarder à nouveau, mais la page a disparu.
      Quand je regardais la source de la page avant hier, le style CSS de l’image n’était pas le bon. Sans doute c’est cela qui provoquait la taille plus petite. Faut chercher d’où cela vient ...

    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