Galleria (fr)

Publié le : 16 novembre 2011 – Dernière modification le 21 décembre 2021 – par emthanh, Matthieu Marcillaud, RealET – 211 commentaires

English, français
1
2
3
4
5
29 votes

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)

ouverture avec lightbox/open with lightbox

Discussion

5 ans 1 an 3 mois Sans limite
par date
Filtrer

78 discussions

  • Gafa

    Bonjour,
    merci pour ce plug-in. Cependant j’aurais besoin d’un petit peu d’aide, étant débutant sur spip. Voilà j’ai acheté sur le site de galleria un thème « premium » (le twelve), et celui-ci est fourni avec un version plus récente (1.3.3) de galleria, et ne fonctionne apparemment qu’avec celle-là. J’ai ajouté dans /plugins/auto/galleria/galleria le nouveau thème et la nouvelle version de galleria. Problème, le fichier .js de la nouvelle version s’appelle galleria-1.3.3.min.js, et visiblement mon site ne le charge pas. Quelqu’un aurait une idée pour forcer spip à charger cette version ? J’ai essayé de renommer le nouveau et d’effacer l’ancien, sans succès. Et d’insérer une commande

    <script src... ></script>

    dans le modèle galleria.html, mais rien ne marche. J’essaye aussi de me faire aider côté service client de galleria, la solution est sans doute simple mais je suis assez débutant... Merci d’avance pour votre aide ?

    Répondre à ce message

  • 1
    Hans

    Bonjour,

    j’utilise votre plug in avec plusieurs galleries sur une même page.
    Le temps de chargement est donc assez long.
    je voulais savoir si il était possible de charger des vignettes avec des tailles réduites au lieu de laisser les images du diaporama se faire réduire par galleria.

    Auriez vous une idée ?
    Merci !!

    • emthanh

      Bon jour,
      La taille des images est celle vos images téléchargées .Si vous avez chargé des images d’un appareille photo ; pensez a réduire leur taille
      Pour réduire le chargement , il faut :
      soit réduire la taille des images au plus proche du rendu de votre galerie
      soit diminuer le pagesize ; nombre d’image par page

    Répondre à ce message

  • 7
    Tanguy Wermelinger

    Bonjour,

    j’aimerais savoir si il est possible d’intégrer au diaporama galleria les images d’un article qui sont présentes dans le portfolio de l’article ?

    Le diaporama marche très bien quand les images ne sont pas dans le portfolio mais n’affiche pas le contenu de ce dernier.

    Il s’agît d’utiliser le plug in « mosaique » afin de pouvoir faire glisser les images pour modifier leur ordre d’apparition dans la gallerie. (quand on est sur la page de l’article dans l’espace privé)

    Merci pour votre aide !!

    • emthanh

      Bonjour,
      Les images du portfolio ne sont pas prise en compte pas ce plugin.
      Seul les images jointes a un article

    • Tanguy Wermelinger

      merci pour votre réponse.
      Dans l’espace privé, sur un article, est il possible d’organiser l’ordre d’apparition des images dans le diaporama autrement que par une modification de l’id ou du nom des fichiers ?
      Peut être un plug-in qui permettrait de faire remonter ou descendre les illustrations de l’article ?

      Merci pour votre aide !

    • emthanh

      Non , il n’y a pas d’option de tri des images .
      ordre par défaut est celui d’inclusion dans dans l’article.
      Je commence a penser a cette option

    • Tanguy Wermelinger

      Je me demandais si ce patch :
      http://zone.spip.org/trac/spip-zone/changeset/74610/_plugins_/galleria
      permet de réaliser cette opération ?

      Merci pour le coup de main !

    • TW

      je me permet de relancer ma question…

      Ce plugin est il fait pour utiliser les images versés dans le portfolio au lieu de l’article, oui, non ?
      http://zone.spip.org/trac/spip-zone/changeset/74610/_plugins_/galleria
      merci pour votre aide !

    • emthanh

      Bonjour,
      Je n’ai pas personnellement ajoutée cette option, c’est une contribution. En ajoutant une option mode=document , la boucle ajoute les images du portfolio. faites le test
      Par contre on ne pas faire les 2 , portfolio et images
      Pour plus d’informations , la doc n’est pas explicite sur ce point
      http://www.spip.net/fr_article1823.html

    • TW

      Bonjour,
      merci pour votre réponse. Effectivement, les éléments du portfolio sont bien pris en ajoutant l’option mode=document dans la boucle.
      Cependant, la boucle ne semble pas prendre en compte le plug in mosaique. (l’arrangement manuel des images du portfolio par glisser déposer).

      Exemple d’une boucle :

      <div id="diapo3">
  <BOUCLE_articledate3(ARTICLES){id_article=12}>
    <div id="gallery3">
      [(#MODELE{galleria}{ordre_mosaique,id_article,lightbox=true}{mode=document})]
    </div>
  </BOUCLE_articledate3>
</div>

      Je vais contacter la personne de ce plug in (mosaique) pour avoir son opinion mais si jamais vous avez une suggestion…

      En tout les cas, merci beaucoup pour vos retours !!!

    Répondre à ce message

  • 2
    aquinaraba

    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.

    • emthanh

      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

    • aquinaraba

      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

    Répondre à ce message

  • 8
    spipnaute

    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

    • emthanh

      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.

    • emthanh

      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

    • spipnaute

      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

    • spipnaute

      Le script dans le code generé...

    • emthanh

      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

    Répondre à ce message

  • 1
    Bruno

    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

    • emthanh

      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 .

    Répondre à ce message

  • 5
    hans

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

    Merci

    • emthanh

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

      <galleria1>
      <galleria2>

      dans le corps d’un article

    • hans

      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

    • hans

      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>
    • emthanh

      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.

    • hans

      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

    Répondre à ce message

  • seninfo

    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

    Répondre à ce message

  • 4
    Mti131

    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...

    • emthanh

      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

    • Tagada

      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

    • Tagada

      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

    • Tagada

      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

    Répondre à ce message

  • 1
    Tagada

    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à.....

    • Tagada

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

    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