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

  • Renée picard

    Bonjour

    J,ai beau essayer de jouer dans le css, je n’y arrive pas. J,aimerais pouvoir faire afficher le titre et le descriptif à coté de la photo et non en dessous.

    Merci

    Répondre à ce message

  • Salut Bill,

    J’ai changé un petit truc dans la version allemande (un lien à l’explication allemande de la notion “modèle”), et maintenant, si l’on veut regarder en ligne - juste la version francaise. C’est quoi ca ?

    Rainer

    Répondre à ce message

  • 1

    Bonjour,

    Que signifie la mention « prérequis » ?
    Est-ce que cela veut dire qu’il faut installer les autres plugins (JQuery
    -  Tickbox v2) ?

    merci d’avance à vous

    jaro

    • Ca date de la 1.9.1, en 1.9.2, avec la version stable (c’est celle la qu’il faut prendre), pas de prérequis puisque jQuery est intégré.

      C’est « un peu » compatible tickbox (si il y a le plugin actif, on peut cliquer sur l’image principale, mais le diaporama de tickbox tourne sur les images de la page)

    Répondre à ce message

  • 6

    Bonjour,
    merci pour ce plug-in sympa et efficace.
    Mon petit problème vient sûrement de ma feuille de style, mais bon ne sachant pas par où commencer...
    Ma question : Pourquoi quand j’affiche les vignettes, la première est systématiquement à taille réelle ? Les vignettes suivantes sont par contre elles réduites. (Quand je ne précise pas « |center » après un imgxx mon image se cale à gauche par défaut.) Merci d’avance.

    • J’ai exactement le meme problème, quelqu’un a une idée pour le résoudre ? Merci d’avance et bonne année.

    • bonjour,

      a priori, ca doit être un filtre image_reduire appliqué sur #TEXTE qui doit causer le problème.

      Sinon, je ne vois pas, il faudrait pouvoir regarder ca en ligne...

      @++

    • Bonjour

      Je teste en local ton plugin très sympa afin de remplacer sur un spip 1.9.2.d le plugin gallery que j’utilise avec la 1.9.1

      Mise en place ok mais j’ai effectivement un image_reduire dans mon squelette. Comment passer par dessus ce filtre que j’aimerais garder pour d’autres articles ?

      J’ai 2 autres soucis :
      -  icones pour changer la présentation inactifs
      -  tout ce que je mets dans mes_fonctions.php n’est pas pris en compte

      Merci d’avance pour ta réponse.

    • Bonjour,
      J’ai beau chercher dans ce forum, je n’ai pas trouvé de réponse à cette question (1re vignette non réduite). Il est possible que la réponse m’ait échappé (spip novice...)
      Si quelqu’un peu redonner cette réponse en restant le plus simple possible ce serait génial !!!!
      Merci d’avance.
      @+
      Laurent

    • Enlever le filtre image_reduire appliqué sur le texte dans le squelette (dans article.html [(#TEXTE|image_reduire{400})] doit etre remplacé par [(#TEXTE)].

    • SUPER ça marche !
      Désolé d’avoir demander de répéter ce qui avait déjà été dit mais je n’avais pas compris !!!!
      Merci beaucoup.
      Laurent

    Répondre à ce message

  • 3

    Bonjour

    A chaque fois que je crée le fichier de configuration( mes_fonctions.php) le contenu de mes articles disparai sauf celui de la page d’accueil.

    D’où peut provenir le problème ?

    Merci

    • en général c’est un probleme de caracteres (retour à la ligne ou espace) avant le <?php ou après le ?> ou une erreur de syntaxe dans le fichier

    • Bonjour

      Je sais d’où provient le problème:les suqelettes alternatives contiennent aussi un fichier nommé mes_fonctions.php.

      Comment resoudre ce problème ?

    • Bonjour

      Je pense que le problème vient du fait que les squelettes alternatives contiennent déja un fichier mes_fonctions.php.

      Mais comment le resoudre maintenant ?
      Merci

    Répondre à ce message

  • Bonjour

    A chaque fois que je définis le fichier de configuration(mes_fonctions.php) le contenu de mes articles disparais sauf celui de la page d"accueil.

    D’où peut provenir le problème ?

    Merci

    Répondre à ce message

  • 1

    Bonjour

    Pour ajouter les images, faut il faire joindre un document ou ajouter une image ?
    lequel convient le mieu ?

    Merci

    • ca depend du modele en fait.

      moi j’utilise image comme ca je peux mettre un portfolio qui ne prend que les documents (par exemple le zip des images) dans mon squelette

    Répondre à ce message

  • 2

    Existe-t-il un « tuto » quelque part pour les débutants qui veulent insérer, par exemple, un diaporama dans la page « sommaire » ? D’avance, merci.

    • il existe sans doute une doc qui décrit comment utiliser un modèle dans un squelette...

      pour diapo, ca donne par exemple :

      [(#MODELE{diapo}{id=52}{align=left})]

      pour afficher le diaporama de l’article 52 avec vignettes à gauche.

    • Merci beaucoup, ça marche ! Quelquefois un tout petit éclaircicement est nécessaire pour les débutants. En tout cas, ça fait chaud au coeur de trouver de l’aide et aussi rapidement, bravo.

    Répondre à ce message

  • 2

    Bonjour,

    Je n’ai aucun problème d’affichage tout se passe bien , sauf que
    Sur la page d’accueil , le message tronqué affiché est :

    > 0 | 8 img src=’local/cache-vignettes/L60xH43/electromecanicien-c0bc5.jpg’ width=’60’ height=’43’ alt=’’ class=’spip > suite

    ce qui n’est pas top

    y a t il un moyen simple de ne pas faire afficher ça
    j’ai besoin de la fonction troncature pour le reste de l’affichage

    (j’ai pu contourner le probléme ,en ne faisant pas afficher l’article dans le sommaire
    et en créant un nouvel article avec un lien vers le diaporama
    ça marche , mais c’est un peu compliqué pour mes utilisateurs )

    Merci pour ton taff

    fgth

    • zut, effectivement, ca coince avec le couper.

      en fait, il faudrait faire un truc du genre :

      [(#TEXTE*|replace{',<diapo[0-9]+\|?(center|left|rigt)?>,'}|propre|couper{200})]

      histoire d’éliminer les appels à diapo avant de passer propre et couper

    • merci pour ta réponse , je vais tester

      je te tiens au courant
      il me faut un peu de temps pour tester ....

    Répondre à ce message

  • 1

    Bonjour

    Peut on mettre des images de plus grandes tailles tel que 800*600px.
    ou bien il faut les garder à la taille de la galerie.

    Merci

    • les images sont de toutes facons redimensionnées si elles sont trop grandes.

      On fixe la taille maxi de la grande image avec $GLOBALS[’diapo_grand’]

      Attention, le conteneur fera 4px de plus (marge), il faut avoir la place de l’afficher dans le squelette

    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