Galleria (fr)

Une galerie d’image qui utilise la librairie javascript Galleria.

Description

Ce plugin vous permet d’ajouter des galeries d’images à vos articles. La galerie créée utilise la librairie javascript Galleria. Le plugin propose un modèle nommé <galleria>.

Utilisation

Pour créer une galerie d’image ajoutez une balise <galleria##> dans un article, où ## est l’ID d’un article.Les images de la galerie sont celles liés à l’article.

Options

Les options les plus courantes du modèle sont :
-  width
-  height
-  lightbox :true
-  transition :[fade|flash|pulse|slide|fadeslide|doorslide]
-  theme : le nom d’un theme Galleria
-  pagesize : le nombre d’image par page

Ex : <galleria22> une galerie dans l’article 22 ; <galleria22|lightbox=true> activation de l’effet lightbox

Pour plus d’options et de personnalisation de la galerie reportez-vous directement au site de Galleria

Bug connu

Lorsqu’on ajoute plusieur galerie dans un même article, la galerie ne fonctione pas correctement. (bug fermé avec la version 1.3.1)

Références

version 2.0.0
SPIP minimum 3.2 librairie JQuery n’est plus compatible avec les versions <3.2
version Galleria 1.5.7 site de Galleria
version de SPIP pour développement 3.2
svn svn://zone.spip.org/spip-zone/_plug...

Retro compabilité

version 1.3.5
SPIP 1.9.2>= et <3.2.0 librairie JQuery
version Galleria 1.2.9 site de Galleria
version de SPIP pour développement 2.1.11
svn svn://zone.spip.org/spip-zone/_plug...
ouverture avec lightbox/open with lightbox

Discussion

75 discussions

  • 2

    Bonjour,
    Il y a dans le package de galleria un répertoire flickr. Quelqu’un a-t-il utilisé cette possibilité ?
    Je cherche à faire un diaporama à partir de photos d’albums issui de flickr. Pour l’instant j’utilise un script flash, mais j’ai 40% de mes lecteurs qui utilisent mac et donc je souhaite évoluer vers une solution htlml5 sans avoir à transférer toutes les photos.
    D’avance merci pour vos aides.

    • Cette partie du plugin n’est pas implémente.
      Ce plugin utilise Galleria (voir le site ) et avec cette librairie on peut importer des galeries flickr et picasa .
      Ces fonctions ne sont pas reprises dans le plugin , je cherche un moyen élégant de les inclure.
      Ces fonctions sont différente de nom=valeur

    • Bonjour,
      Je viens de pouvoir utiliser cette librairie dans mon site, mais en injectant directement du code dans l’article. J’arrive à afficher un album de la galerie flickr avec l’adresse de cet album.
      Pour cela j’utilise le code que j’ai trouvé à cette adresse «log.galleria.io/post/14172673278/tutorial-create-a-flickr-gallery-with-categories-using». Il faut cependant changer le nom des variables pour ne pas entrer en conflit avec les css de spip.
      Si cette info peut vous être utile, contactez-moi.

      Cordialement

    Reply to this message

  • 8

    Débutant, Spip 2.0.9

    Bonjour,
    J’ai installé le plugin et suivie l’exemple que tu donnes mais tout ce que j’obtiens à la place ou devrai s’afficher la galerie c’ est un petite cadre avec le link galleria 64 à l’intérieur et qui m’envoi à la page d’accueil. J’ai trois plugins actifs: cfg, Menus déroulants Babbibel et Pages. Les bibliothèques installées sont

    JavaScriptPacker
    ecrire/lib/
    jquery.ui-1.6
    ecrire/lib/
    safehtml
    ecrire/lib/

    Manque-t-il quelque chose à ma config? Al’aide!!

    • Natacha Courcelles

      Bonjour
      pour l’affichage de sans galerie
      dans mon cas c’est CKEditor qui interprétait les balises < et > en entités html «<» et «>»

      bien cordialement
      Natacha Courcelles

    • Bonjour,
      Avez vous regarder le html généré ? Je n’ai pas assez d’élément pour résoudre votre problème.
      Cordialement

    • Natacha Courcelles

      Bonjour
      merci pour votre réponse
      comme je vous le disais le problème est résolu
      avec CKEditor les balises < et > de sont transformées en entités html par CKEditor
      il suffit de passer en mode barre d’outils Spip pour que ça fonctionne
      Cordialement
      Natacha

    • spipnaute

      Bonsoir emthanh,
      Merci pour ta réponse. De mon coté ma galleria s’affiche assez disgracieusement, mais au moins on voit déjà quelque chose: vignettes avec un contour orange/gris au passage de la souris (laid!), aucun fond noir, aucune transition en douceur...( mais je suppose que tout ça doit se paramétrer avec les options de Galleria) et surtout elle reste insérée dans le corps du texte de l’article: Quand je clique sur une vignette pour agrandir ma photo la largeur de celle ci ne dépasse pas 500px , alors que la galerie devrais prendre toute l’écran, fond compris.

      Dans quel fichier dois-je donner les nouveaux paramètres?
      Quel paramètre dois-je modifier pour que la Galleria prenne tout l’écran?
      Quand tu me parles code HTML généré parles-tu du fichier galleria.hmtl qui se trouve dans /www/spip/plugins/galleria/modeles?

      Merci d’avance, et aussi merci à Natacha même si je n’ai pas compris de quoi elle parle.

    • Bonjour,
      Ce que vous me décrivez à l’air d’une erreur de squelette , l’apparence de votre site.Vous devez redifinir un style qu’utilise Galleria.
      Les options Galleria , ne gèrent que le comportement de la galerie.
      Autre piste , un de vos plugin spip fait un conflit avec galleria. Vous pouvez alors tester en désactivant un part un les plugins.
      Sinon examinez le code Html de votre site , “le code généré”.
      Cordialement

    • Bonjour,
      De nouveau de retour sur ce chantier abandonné trop long temps... et toujours pas de solution pour ma galerie que ne marche pas. Les images incluses dans mon article, soit elles s’affichent comme un portfolio, soit elles ne s’affichent pas si je choisie l’option “supprimer du portfolio”; et pourtant elles y sont, d’après ce que je vois dans le code html généré. Voici deux captures du code de mon article où j’ai inséré ma galerie et aussi d’un message d’erreur qu’apparaît en haut de ma page. Ce message est apparu une fois j’ai activé-désactivé les différents plugins à la recherche d’un éventuel conflit entre eux. Merci encore.
      Cordialement

    • Le script dans le code generé...

    • Bonjour,
      Vous avez , je pense une version 3.* de spip j’ai moi-meme ce comportement lors de l’import en masse d’images , elles sont dans le portfolio , et ca malgré l’option coché.
      Tous enlever les retirent de l’article
      Ils est obligatoire de les “retirer du portfolio” une a une , pour les voir , le bouton est sous l’image

    Reply to this message

  • 1

    Bonjour et merci pour ce plugin,
    est-il possible d’afficher les vignettes à droite de l’image et non en bas.

    par avance merci

    bruno

    • Oui,
      Mais cela peut être long.
      Il faut avoir des connaissances de webdesign .
      Vous voulez que les vignettes soient sur un totem vertical , et que le défilement aussi.
      Il faut pour cela modifier le CSS du bandeau et modifier le comportement du défilement dans le javascript.
      Vous pouvez trouver ces fichiers dans le thème classique galleria du plugin .
      Ou développer le votre .

    Reply to this message

  • 5

    Bonjour,
    est il possible d’afficher plusieurs galeries sur une même page désormais?

    Merci

    • Bonjour,
      Effectivement le bug est corrigé.
      testez en ajoutant:

      <galleria1>
      <galleria2>

      dans le corps d’un article

    • Merci pour votre réponse,

      J’essaye actuellement de convoquer sur une page sommaire le diaporama présent dans les articles d’une rubrique.
      Par exemple:

      sur le page sommaire est affiché le contenu de la rubrique A:
      — le titre de la rubrique
      — Titre de l’ article 1 et son diaporama
      — Titre de l’ article 2 et son diaporama

      Rubrique A
      — Titre Article 1
      — — diaporama <galleria1>
      — Titre Article 2
      — — diaporama <galleria2>

      voici ma tentative:

      <div id="content">
      <INCLURE{fond=inclure/header}{home=oui} />
      <INCLURE{fond=inclure/head} />
              <div id="art">
              <BOUCLE_rubrique(RUBRIQUES){id_rubrique=2}>
              <h2>#TITRE</h2>
              <BOUCLE_article(ARTICLES){id_rubrique=2}>
              <h2>#TITRE</h2>
              <galleria|lightbox=true>
              [(#MODELE{galleria}{id_article,lightbox=true})]
              </BOUCLE_article>
              </BOUCLE_rubrique>
              </div>
      </div>

      Merci pour votre aide

    • un oubli: j’ajoute qu’actuellement j’obtiens la présentation des images contenus dans l’article mais sans diaporama…

      voici le header:

      <head>
      
      <script type='text/javascript'>/*<![CDATA[*/(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement);/*]]>*/</script>
      
      <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>    
      
      <script src="galleria/galleria-1.2.9.js" type="text/javascript" charset="utf-8"></script>
      
      <script src="galleria/galleria-1.2.9.min.js" type="text/javascript" charset="utf-8"></script>

      et le lancement de script de galleria en bas de page:

      <script>
      /*<![CDATA[*/
      Galleria.loadTheme('[(#CHEMIN{galleria/themes/[(#ENV{theme, "classic"})]/galleria.[(#ENV{theme, "classic"})].min.js})]');
              
      // Initialize Galleria
      Galleria.run('#galleria');
      </script>
    • Bonjour,

      Vous avez une erreur

              <galleria|lightbox=true>
              [(#MODELE{galleria}{id_article,lightbox=true})]

      la balise dans un squelette est inutile , il faut lire l’exemple de la documentation comme il suit
      -balise a inclure dans le text d’un article ou autre

      <galleria12>

      -a inclure dans le un squelette spip

      [(#MODELE{galleria}{id_article})]

      le code du squelette doit être

      <div id="content">
      <INCLURE{fond=inclure/header}{home=oui} />
      <INCLURE{fond=inclure/head} />
              <div id="art">
              <BOUCLE_rubrique(RUBRIQUES){id_rubrique=2}>
              <h2>#TITRE</h2>
              <BOUCLE_article(ARTICLES){id_rubrique=2}>
              <h2>#TITRE</h2>
      <!-- retirer la balise <galleria|lightbox=true> -->
              [(#MODELE{galleria}{id_article,lightbox=true})]
              </BOUCLE_article>
              </BOUCLE_rubrique>
              </div>
      </div>

      Je pense les headers sont inutiles.

    • Merci pour votre réponse, j’ai bien modifié le code et sortie la ligne d’appel galeria superflue.
      Les headers sont effectivement en trop.

      Le diapo se lance désormais. Cependant, est chargé dans le diaporama toutes les images des articles appartenant à une rubrique.
      Est il possible d’obtenir sur la même page mais séparément, un diaporama spécifique à chaque article, avec les images contenues seulement dans l’article concerné? Tout en sachant qu’ils appartiennent à la même rubrique?

      Au lieu de suivre cette organisation:

      Rubrique A
      — Titre Article 1
      — — Premier diaporama des images dans article 1<galleria1>
      — Titre Article 2
      — — Deuxième diaporama des images dans article 2 <galleria2>

      Le code génère cette mise en page:

      Rubrique A
      — — diaporama des images dans article 1<galleria1> ET images dans articles 2 <galleria2>

      Auriez vous une idée à me soumettre pour tenter de réussir cette opérations?
      Merci pour le coup de main!
      T

    Reply to this message

  • j’ai ajouté la galerie mais au niveau de l’article la galerie n’apparait pas les images sont affichées les unes après les autres. Si quelqu’un à une solution

    Reply to this message

  • 4

    Bonjour,

    Une petite suggestion d’amélioration :
    <BOUCLE_galleria (DOCUMENTS){id_article=#ENV{id}}{extension==jpg|gif|png} {pagination #ENV{pagesize,30}} {mode=image} {par num titre}>

    Le {par num titre} permet de choisir l’ordre d’affichage des vignettes à partir du numéro que l’on indique dans le titre (“1. image 1”, “2. image 2”...).

    Actuellement les photos sont ordonnées par nom de fichier, c’est moins flexible...

    • Bonjour,
      Je ne vais pas utiliser la suggestion que vous me proposez , car cela provoquerait un comportement trop spécifique.
      En effet la plupart des appareils photo nomme leurs images en date US , [YYYY-MM-DD_HH:mm:ss] dans ce cas là le classement par nom de fichier affiche les images dans l’ordre de prise de vue (perfectible en allant chercher des informations sur le EXIF, ...etc) ce qui est pratique
      Le titre/spip de l’image est utilisé par le plugin voir le le guide complet , pour fournir des informations à une info bulle
      essayez !
      Je vous remercie malgré tout , de l’attention que vous portez à ce plugin, je reste toujours ouvert à d’autres suggestions

    • Bonjour,

      Pour ma part, l’ordre des photos est celui de chargement des images et donc pas forcément le nom des fichiers lorsque j’importe plusieurs photos du serveur .
      Comment faire pour ordonner selon le nom du fichier ou du moins pour contrôler l’ordre ?

      Merci

      Karen

    • Pour préciser le tri se fait par ID et nom sur le nom du fichier.
      Quel moyen pour organiser sur le nom du fichier (0001.jpg) ?

      Merci

      Karen

    • Après moultes recherches, j’ai fini par trouver ce qui n’allait pas.
      Le critère de tri choisi (en l’occurrence tri fichier,id_document ) n’a fonctionné qu’à partir du moment où j’ai modifié le fichier plugins/auto/galleria/v1.3.2/modeles/galleria.html alors que je m’acharnais sur plugins/auto/galleria/modeles/galleria.html.

      Si ca peut aider un(e) novice comme moi ;-)

      Bonne Journée

      Karen

    Reply to this message

  • 1

    Bonjour,

    Tout d’abord merci pour ce très bon plug in.

    Sous spip3, les modifications faites sur le CSS n’apparaissent pas : caches vidés, page recalculée, rien n’y fait !
    Pourtant c’est le css classique et il semble bien appelé.
    Pour info, la galerie est appelée directement dans un article.

    Je bloque un peu là.....

    • Ben c’est tout bête, il fallait aussi vider le cache de safari.
      Désolée pour la question bête !

    Reply to this message

  • 1

    Ah, ce que je cherchais depuis longtemps !
    Léger fonctionnel.
    Pour montrer mes tableaux !
    Merci encore :)

    Reply to this message

  • Tout simplement génial !!

    Mille mercis

    Reply to this message

  • 1
    michel80

    Avec spip 3.0.10 eva 4.2 galleria 1.3.0 je souhaite présenter un diaporama sans vignette.
    Quelle option choisir , j’ai tenté carousel mais sans succés
    Avez vous un site qui présente les différentes options
    Merci d’avance
    Michel80

    Reply to this message

Add a comment

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 / PostgreSQL
  • 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 apparait.

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.

Who are you?
[Log in]

To show your avatar with your message, register it first on gravatar.com (free et painless) and don’t forget to indicate your Email addresse here.

Enter your comment here

This form accepts SPIP shortcuts {{bold}} {italic} -*list [text->url] <quote> <code> and HTML code <q> <del> <ins>. To create paragraphs, just leave empty lines.

Add a document

Follow the comments: RSS 2.0 | Atom