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

  • Salut à tous,
    Est-ce que ce plugin fonctionne sous « SPIP 2.0.9 » avec le « Jeu de squelettes Multiflex 3 » ?

    Répondre à ce message

  • 1

    Bonjour,

    Comment faire pour faire apparaitre toujours en première position (repère 1) les images ajoutées le plus récemment dans un artiicle utilisant le plugin Diapo.

    Merci

    • Le plus simple pour ordonner comme on veut c’est d’utiliser des titres numérotés (par exemple, dans ton cas, « 99. Le titre de l’image » puis pour en ajouter une en tete, il suffit de lui mettre comme titre « 98. Le titre de ma nouvelle image » et ainsi de suite...)

      Le tri est fait {par num titre, titre, id_document} mais il suffit de le modifier dans /modele/diapo.html (BOUCLE_docs et BOUCLE_docs_diapo) et /diapo_img.html (BOUCLE_docs_diapo).

      dans ton cas, il faudrait mettre à la place {!par id_document} ou {!par date} (ce qui permet d’en intercaler une au besoin en jouant sur la date)

      @++

    Répondre à ce message

  • Bonjour,

    Une petite correction est à apporter concernant la validité XHTML Stric,

    Dans le modèle de base /plugins/diapo_1_9/modeles/diapo.html à la ligne 36 y a ceci :

    [<p>(#DESCRIPTIF)</p>]

    il est nécessaire de supprimer la balise <p> et </p> pour ne garder finalement que ceci :

    [(#DESCRIPTIF)]

    la balise DESCRIPTIF génère déjà les marqueurs de paragraphe p

    Cordialement

    Répondre à ce message

  • feuillard

    Bonjour,
    Merci beaucoup pour ce plugin qui fonctionne à merveille sous Firefox, Iceweasel et Epiphany entre autres, en version 0.6.
    Pour info seulementy puisque j’ai résolu le problème en rédigeant ce post...

    J’utilise une version spip 1.9.2.e , le squelette eva-web30 et le plugin en version 0.6

    Voici le problèeme que je comptais poster avant de le résoudre :

    Un souci semble se poser sous Internet Explorer 8 : les vignettes apparaissent bel et bien au bon endroit, mais la diapo (ainsi que les vignettes lorsqu’elles sont sur le côté droit ou gauche) ne s’affiche(nt) pas en entier.
    Sous la version 0.1 du plugin, ça marche sous IE8 (au détail près que la barre de positionnement des vignettes ou de lecture du diaporama n’apparaît pas sous tous les articles), mais plus sous Firefox où le problème est le même !

    Le squelette eva utilise le fichier article.html, qui appelle sur sa 31e ligne le fichier article_normal.html, qui appelle lui-même sur sa deuxième ligne le fichier inc_entete-meta.html.

    La balise #INSERT_HEAD se situe dans ce dernier fichier, à la cinquième ligne.

    Pour que le plugin fonctionne, il faut placer cette balise en tête du fichier article.html (et à priori de tous les autres fichiers qui appellent inc_entete-meta.html), et la supprimer du fichier inc_entete-meta.html.

    La balise est donc à rajouter sur les fichiers :
    -  article.html
    -  breve.html
    -  forum.html
    -  login.html
    -  mentions.html
    -  mot.html
    -  plan.html
    -  postcast-page.html
    -  recherche.html
    -  rss.html
    -  rubrique.html
    -  site.html
    -  sommaire.html

    qui se situent tous dans le dossier /plugins/eva-web30

    C’est tout !

    Répondre à ce message

  • Joseph Tux

    Bonjour,

    merci Bill pour votre réponse ( et mes excuses pour avoir tant tardé à la lire, donc à y répondre )

    Je viens de recharger en une seule passe le dossier des photos, de chez moi vers l’hébergeur par FTP, avec des fichiers ordonnés par leur nom ( qui contient : un préfixe unique, puis un nombre -donnant l’ ordre souhaité- puis des lettres ).

    Les fichiers ainsi importés dans l’article ( tout un répertoire, à partir de tmp/upload/le_repertoire ) prennent alors un nom comme « img456 ».

    • Est-ce que img456 est l’ « Id document » ?
    • Le titre est-il celui que je peux donner à l’image ?
    • « num titre » est-il un numéro donné avant le titre ? ( comme pour trier les documents spip, préfixe numérique suivi d’ un point et d’ un espace )

    J’ai pu adapter sans problème la présentation avec mes_fonctions.php : la documentation est parfaite.

    Un grand merci pour ce plugin et sa simplicité d’emploi !


    • SPIP 2 et squelette IENSP-X
    • Sonorisation : plugin itheora

    Répondre à ce message

  • 1
    Joseph Tux

    Bonjour

    Je réalise un petit reportage photo, ( 2 ou 3 photos par jour d’un chantier de restauration )

    Jusqu’ à présent, les photos que j’ajoutais chaque jour se trouvaient naturellement ordonnées chronologiquement.

    Après une pause de quelques semaines, j’ai repris une nouvelle série.

    J’ai modifié ces photos, pour qu’elles tiennent toutes dans un cadre carré ( afin d’harmoniser la présentation des verticales, horizontales et éventuelles redécoupées )

    Est-ce pour celà qu’elles ne sont plus à la fin du diaporama, mais au début ?

    -  Sur quel(s) critère(s) l’ordre du diaporama se fait-il ?

    Si quelqu’un a une explication, voire une solution, qu’il en soit déjà félicité et remercié !

    Bravo et merci pour ce plugin, merci à tous.

    • le classemement est par num titre, titre, id_document

      tu as peut etre tout simplement ajouté un titre à certaines photos ?

      si tu veux modifier l’ordre, il faut modifier /modele/diapo.html ET diapo_img.html

      il suffit de changer le critère de tri sur la boucle DOCUMENTS

    Répondre à ce message

  • 3
    Jean Christophe

    Bonsoir

    Ce plugin fonctionne-t-il sur spip 2 ?

    Sinon, une version compatible est-elle prévue ?

    Je le souhaite car j’aurais du mal à me passer de ce super plugin !

    Joyeux Noël !

    • As-tu eu réponse si compatible avec Spip2, je souhaite l’utiliser mais je n’arrive pas à trouver si c compatible ou non
      merci

    • jusqu’ici tout va bien (comme disait le gars sautant du 22e etage) !

       :)

      pour le moment ca a l’air de marcher mais je n’ai en fait pas du tout regardé.

    • Jean Christophe

      Oui oui, il fonctionne sur un spip 2.03

      Un exemple sur mon site

    Répondre à ce message

  • 1

    Bonsoir Bill,

    Merci de prendre un peu de temps pour m’éclairer.

    Donc, pour jQuery, je vais supprimer les plugins que j’ai installé inutilement :) !!

    Ensuite, je crois que je vais commencer par lire les docs en détail, visionner les vidéos sur les quelles je suis tombé cet après-midi histoire d’apprendre à être un spipien un peu plus confirmé...

    Pour ce qui est du dioparama, si je te suis, je télécharge les images que je veux voir apparaître dans mon article, puis plutôt que d’insérer dans le code “< docx >” (x étant le numéro du document) j’inscris “< diapoX >” avec X pour numéro d’article. je vais faire des essais et te tiens au courant.

    Excuses-moi si je t’ai paru un peu trop demandeur.

    Merci encore et à bientôt,

    Itoun

    • oui c’est ca, le principe de ce modele, c’est de ne pas etre lié à l’endroit ou on l’utilise.

      tu peux donc dans l’article X ou la rubrique Z, afficher le diapo contenant les images de l’article X

      Sinon, pour la proposition de relecture/modification de l’article, c’etait serieux.

      Tu n’es pas le premier à ne pas comprendre que ca ne fait qu’ajouter un raccourci typo, c’est sans doute que ca saute pas aux yeux.

      Si tu as des suggestions de modifs, elles sont vraiment les bienvenues, encore plus si tu veux t’en charger !

      @++

    Répondre à ce message

  • 1

    Bonjour,

    Nouveau dans l’univers spip, j’ai installé spip SPIP 2.0.7+ahuntsic+plugin diapo.


    Tout d’abord pour activer le plugin “jQuery pour SPIP 1.92x”, j’ai cette réponse :
    « * Impossible d’activer le plugin auto/jquery_192
    * Nécessite SPIP en version [1.9.2 ;2.0.0) minimum. »

    Ensuite, impossible d’activer “jquery_plugin”... la réponse est
    « * Impossible d’activer le plugin auto/jquery_plugins_1_9_3
    * Nécessite le plugin CFG en version [1.2 ;] minimum. »
    Je l’ai installé et “jquery_plugin” s’est bien installé !!!!!!... ---------- > mais aucun changement sur le site.

    Bon, je passe parce que mes compétences ne suivent décidément pas... :D !!


    j’en viens au diaporama, comment appelle t-on toutes les photos dans ce dernier ? j’ai mis <diapo8|pause><diapo9|pause>... bien entendu je me suis vite rendu compte que cela mettait deux et non pas un seul diaporama en route. que dois-je faire  ? (je sais ça ne marchera pas, j’ai essayé :D !!)

    Dois-je joindre chacune des photos via parcourir ou bien suis-je censé déposé un zip des photos du diaporama à un endroit avec filezilla ? En gros je me sens un peut seul dans cet océan :) !!


    ça va paraître naîf à certain mais lorsqu’on s’y connait peu, seul le tâtonnement permet d’avancer et je vous avoue ne trouver aucun tuto digne de ce nom pour les débutants et néophytes, c’est dommage, ma motivation est pourtant là.

    Merci à tous,
    Itoun

    • alors, plusieurs choses :

      -  depuis spip 1.9.2, plus besoin de plugin jQuery, c’est natif dans Spip, il faut juste veiller à avoir une balise #INSERT_HEAD dans les squelettes (ce qui est le cas avec la plupart des squelettes)
      -  le plugin diapo ajoute un modèleà spip et ne change donc rien de base, il faut, dans le texte d’un article, appeler <diapoX> pour faire apparaitre le diaporama des images de l’article numéro X
      -  la doc, c’est l’article au pied duquel tu viens de poster... il me semble que l’utilisation y est bien décrite, maintenant, si tu as des suggestions pour améliorer l’article, elles sont les bienvenues, je veux bien t’ajouter en auteur de l’article si tu vois des choses à modifier

    Répondre à ce message

  • Bonsoir,
    la grande image n’est pas redimensionnée sur mon site et lorsqu’on clique sur une vignette la grande image ne change pas. J’ai pourtant #INSERT_HEAD dans mon en-tête.
    SPIP 2.0.2 [13532]
    http://arelaune.aloli.fr/stephanie-f.fr/spip.php?article17

    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