Bandeau
Escal V3
Site de démonstration

Site de démonstration du jeu de squelettes ESCAL fonctionnant sous SPIP3 et mis à la disposition des Etablissements SColaires de l’Académie de Lyon.

Galleria
Article mis en ligne le 20 juin 2012
dernière modification le 16 décembre 2016

par Jean Christophe Villeneuve
logo imprimer
Enregistrer au format PDF

Le Plugin Galleria est un plugin de galerie que j’aime beaucoup et qui, pour moi, fait concurrence au plugin Diapo.

Avantage non négligeable en ces temps qui courent, il est "responsive" si on l’indique dans le raccourci, comme ici !

 Mise en place

Pour créer une galerie avec ce plugin, il suffit de créer un article avec dans la zone texte un raccourci comme celui-ci :

  1. <galleriaXX|width=500|lightbox=true|transition=fade|pagesize=5>

  • XX correspond au N° de l’article
  • width=500 définit la largeur de la galerie en pixels
  • lightbox=true permet d’ouvrir l’image avec ses dimensions d’origine dans une lightbox
  • transition=fade pour des transition en "fondu enchainé". Autres options : flash, pulse, slide, fadeslide, doorslide
  • pagesize : le nombre d’image par page

Autres options intéressantes

  • responsive=true permet de rendre la galerie responsive ; inutile dans ce cas_là de préciser une largeur donc car celle-ci ne sera pas prise en compte !
  • autoplay=true qui permet de faire défiler les images de façon automatique. Ce défilement s’arrête dès qu’on clique sur une des vignettes.


Attention :

  • seules les images qui ne sont pas dans le portfolio seront prises en compte
  • lorsqu’on ajoute plusieurs galeries dans un même article, la galerie ne fonctionne pas correctement

 Métadonnées

Une petite adaptation du modèle permet d’afficher les métadonnées de l’image

  • si l’image n’a pas de titre et si le plugin Métadonnées Photos n’est pas activé, on n’affiche rien
  • si l’image a un titre et si le plugin Métadonnées Photos n’est pas activé, on affiche le titre de l’image
  • et si le plugin Métadonnées est activé, on affiche les métadonnées de l’image

 Exemple

Voici un exemple avec

  1. <galleriaXX|lightbox=true|transition=fade|pagesize=10|responsive=true|autoplay=true>

et une petite personnalisation pour Escal que vous pouvez modifier dans la page de configuration.

0 | 10 | 20

Sous le titre, un descriptif de l'image

0 | 10 | 20


Forum
Répondre à cet article
Galleria
la fougale - le 16 décembre 2016

Bonjour
Je viens de découvrir votre magnifique squelette, et suis en train de le peaufiner pour remettre a jour mon site perso.
J’ai un gros souci avec le plugin galeria qui ne fonctionne pas (j’obtiens exactement le meme résultat qu’avec spip seul.
J’ai, pour tester créé un article de 3 images, activé GD2, inséré dans le texte de l’article la balise , désactivé le plugin mediabox,mais rien n’y fait.
J’utilise spip 3.1, le plugin version 1.3.4 et escal V3
Avez vous une idée de mon problème ?
amicalement
yves

Galleria
Jean Christophe Villeneuve - le 16 décembre 2016

Difficile à dire comme ça.
Une URL pour voir ?

Galleria
la fougale - le 25 décembre 2016

merci de ta réponse mais j’ai trouvé mon erreur... en espérant que cela puisse servir.
1) je travaillais en "local" (serveur LAMP sous linux) et les extensions PHP GD et imagick n’étaient pas installées. Sur le site en ligne aucun problème en suivant les instructions.
Autre problème rencontré, a mon premier test de galerie, j’obtenais les images sous la forme "galeria" plus les images fixes classique de spip. Il ne fallait pas copier le lien de l’image (img6|left) dans le texte, mais juste telecharger les images.
amicalement
yves

Galleria
Sylvain - le 22 mars 2016

Bonjour,
Y-a-t-il un moyen d’ordonner les images du diaporama ?
J’ai essayé le paramètre "datasort", mais sans succès. peut-être que je l’ai mal utilisé aussi.

Merci
Sylvain

Galleria
Jean Christophe Villeneuve - le 22 mars 2016

Là comme ça je dirais qu’il faut

  • copier le fichier galleria.html de /plugins/galleria/modeles vers /squelettes/modeles
  • rajouter le critère {par num titre} dans la BOUCLE_galleria (ligne 6) du fichier copié
  • donner un titre à chaque image en les numérotant à la spip : numéro point espace titre

Pas testé mais ça devrait le faire

Galleria - ordonner les images
Sylvain - le 23 mars 2016

Merci !
ça fonctionne parfaitement.
Donc tu peux dire que c’est testé. J’ai rajouté le critère par num titre à la fin de la liste des critères.

Galleria - ordonner les images
Jean Christophe Villeneuve - le 6 avril 2016

du coup, je vais l’intégrer à escal

Galleria - ordonner les images
Elisabeth Durrmann - le 21 novembre 2016

Bonjour,
Comment fonctionne l’intégration à Escal du tri des images ? J’ai titré mes 1. xx, 2. xy, etc du coup elles s’affichent dans l’ordre dans le porte folio, et dans le corps de l’article, j’ai testé et

sans effet, les photos s’affichent toujours dans l’ordre des images associées au document quand je suis en modification sur l’article.
Merci pour votre aide, bonne journée

Galleria - ordonner les images
Elisabeth Durrmann - le 21 novembre 2016

Complément du message précédent
j’ai testé en rajoutant par_num_titre à la fin des arguments de galleria, ça ne change rien. J’ai testé aussi en rajoutant en argument Datasort=par_num_titre, ça ne fonctionne pas plus.
Faut-il forcément modifier la page html, ce qui est gênant pour les évolutions
Merci

Galleria - ordonner les images
stephane - le 21 novembre 2016

euh si test images sont dans le portofolio

j’essayerais bien l’option mode=document pour choisir le portfolio comme source de vos images
<galleriaxx|mode=document>

xx étant ton numero de galerie

Galleria - ordonner les images
Jean Christophe Villeneuve - le 21 novembre 2016

Le modèle de galleria fournit par escal permet bien de classer ses images en les numérotant mais celles-ci ne doivent pas se trouver dans le port-folio.

Rappelons aussi que si toutes les images ne sont pas numérotées, celles qui ne le sont pas s’affichent en premier puis suivent celle qui le sont. C’est un comprtement natif de SPIP

Problèmes d’affichage
christian voillemont - le 25 juin 2016

Bonjour, depuis quelques jours, j’ai souvent des problèmes d’affichage avec galeria sur la page d’accueil.

Au début, j’avais plus d’affichage du tout mais une erreur css (voir image jointe).

J’ai vidé le cache, ca a remarché puis maintenant, j’ai toutes les images qui se mettent l’une sous l’autre, me faisant des pages tres longues...

De quoi cela peut il venir ?

merci pour vous conseils

Problèmes d’affichage
christian voillemont - le 25 juin 2016

j’ai vidé le cache, désactivé la compression css et ca remarche... comme hier et avant hier...

Par contre, pour le cache, il atteint des valeurs importante, 500, 600 mo, parfois plus alors qu’en théorie, il est limité.

est ce normal ?

Problèmes d’affichage
christian voillemont - le 25 juin 2016

J’ai trouvé...

J’ai recherché les modifications faites ces jours ci...

J’ai mis un onglet archive.

quand il y a un diaporama galeria dans les archives, ca plante tous mes diaporamas...

par contre ce que je ne comprend pas c est qu’ensuite, même si j’affiche une page seule avec le diaporoma, ca ne marche plus.

je retire l’onglet archive.

y a t il un moyen pour éviter ca ?

Problèmes d’affichage
Jean Christophe Villeneuve - le 26 juin 2016

En effet, ce doit être un problème de cache.
Je n’ai jamais utilisé galleria de façon intensive.
Je te conseille plutôt d’aller voir du côté du plugin lui-même sur spip-contrib pour poser ta question.

Problèmes d’affichage
christian voillemont - le 27 juin 2016

Merci, je vais y faire un tour.

Galleria
christian voillemont - le 30 avril 2016

Bonjour,

J’adore galeria et je l’utilise beaucoup mais j’ai un soucis.
Les flèches pour faire défiler les images sont invisibles car elles sont blanches !
elles sont à l’extérieur de l’image à droite et à gauche.

Comment changer leur couleur ?

Galleria
Jean Christophe Villeneuve - le 30 avril 2016

Là ce n’est pas des css mais une image classic-map.png qui est dans /galleria/themes/classic

Tu peux donc :

  • copier cette image dans /squelettes et la modifier à ton goût
  • rajouter ce code dans perso.css
    .galleria-image-nav-left,
    .galleria-image-nav-right {
       background-image: url(../classic-map.png);
    }

et hop !

Galleria
christian voillemont - le 30 avril 2016

Merci, je vais le faire de ce pas.

J’ai remplacé mes diaporama en Cycle2 par galleria que je trouve plus beau.

Et je me suis retrouvé avec des erreurs dans tous les sens.

J’avais un diaporama dans le premier onglet et un dans le deuxième (archive)

J’ai donc du remplacer archive par derniers articles pour que tout rentre dans l’ordre. C’est dommage que deux diaporamas ne peuvent pas cohabiter.

Galleria
christian voillemont - le 30 avril 2016

ça marche super mais des qu’on utilise les flèches ça désactive le défilement automatique.

j’aimerai que les commentaires, titre de photo s’affichent par defaut.
y a t il un truc pour ca ?

Galleria
Jean Christophe Villeneuve - le 30 avril 2016

Là, désolé mais il y a du javascript là-dessous et ça dépasse mes compétences ...

code pour faire defiler automatiquement les images avec galeria
christian voillemont - le 30 avril 2016

En farfouillant, j’ai trouvé un code pour faire défiler les images automatiquement : autoplay=true

Ce qui donne dans mon cas :

<galleriaxx|lightbox=true|transition=fade|pagesize=xx|responsive=true|autoplay=true>
En espérant que cela vous soit utile

code pour faire defiler automatiquement les images avec galeria
Jean Christophe Villeneuve - le 30 avril 2016

Oui, et plein d’autres options sur cette page

code pour faire defiler automatiquement les images avec galeria
christian voillemont - le 30 avril 2016

Bonjour,

Merci.
J’ai vu qu’il y avait une option youtube.
Donc dans le diaporama, je pourrais mettre une vidéo Si j’ai tout compris ?

code pour faire defiler automatiquement les images avec galeria
Jean Christophe Villeneuve - le 30 avril 2016

Aucune idée ... jamais testé de mon côté

code pour faire defiler automatiquement les images avec galeria
christian voillemont - le 30 avril 2016

par curiosité je testerai pour voir.
je vous tiens au courant.

Un fond transparent pour Galleria ?
Lael - le 10 février 2016

Le fond est blanc par défaut.
Est-ce possible de changer cette couleur ?
Merci,

Un fond transparent pour Galleria ?
Jean Christophe Villeneuve - le 11 février 2016

Bonjour

Oui, avec un simple

.galleria-container {
   background-color: #ffffff;
}

dans perso.css et en remplaçant par le code couleur que tu veux

Galleria
Alex - le 12 novembre 2015

Bonjour Jean Christophe,
désolé de te déranger, mais je suis en train de refaire mon petit site après avoir été hackeré. Je suis en train de reprendre en main spip avec escal après quelques années, mais je trouve tout de suite la première difficulté car je n’arrive pas faire marcher la gallerie.
Peux-tu me renseigner, s’il te plaît ?
Alors, j’ai :
- installé et activé le plugin ;
- désactivé le media box (mais cela ne me change rien) ;
- crée un article vide (le n. 2) avec les photos (sans le mettre dans le portfolio) ;
- ajouté au fond d’un autre article le raccourci

Bien, si je ne publie pas (icône verte) l’article 2, il ne se passe absolument rien, si au contraire je le publie, alors je vois toutes mes images alignées a gauche et empilées l’une après l’autre dans leur taille d’origine (presque toutes le largeur 550px)...
Aurais-tu quelque suggestion, s’il te plaît ?
Merci d’avance :)
Très cordialement
Alex

Galleria
Jean Christophe Villeneuve - le 12 novembre 2015

Hello

As-tu activé GD2 dans Configuration -> Fonctions avancées ?

Galleria
Alex - le 12 novembre 2015

Euh, non...
Génial maintenant ça marche :)
Merci beaucoup. Ainsi en alternant Galleria avec Cycle 2 selon les articles, ça devient très chouette ^_^

Merci beaucoup encore et bonne journée !

ALex

Galleria
B6 - le 12 juin 2014

Bonjour Jean Christophe,
J’essaie de créer une galerie d’images. Sans succès tu te doutes bien.
J’ai copié le code
en prenant garde à ce qu’il n’y ait pas de fautes et en remplaçant par le n° de l’article comme énoncé.

J’ai chargé les photos en passant par "ajouter une image ou un document" et sans les mettre dans le portfolio.
Le message d’erreur Image not found : IMG/jpg/sante_college_pagnol-2.jpg s’affiche et c’est en cours de chargement.
J’ai donc essayé de placer mes images dans le Winscp squelettes/images pour qu’il puisse les trouver.
J’ai aussi essayer de vider le fichier temp.
D’où cela peut -il venir ?
Très cordialement

Galleria
Jean Christophe Villeneuve - le 12 juin 2014

Hello

D"abord, tu peux les enlever de /squelettes/images car Galleria ne connait pas ce dossier

Ensuite, crée_moi un compte admin/webmestre et envoie-moi les codes en privé que je jette un oeil.

Il n’y a que l’image sante_college_pagnol-2.jpg qui pose souci ?

Galleria
Kri - le 24 mars 2014

Bravo pour ce magnifique squelette que je suis timidement en train de mettre en place ICI

J’ai des tonnes de questions qu’il faudra que je pose dans les rubriques idoines .

Premièrement : j’ai activé Jquery Cycle qui marche très bien et je voulais essayer Galleria mais ce plugin ne semble pas fonctionner : il est activé pour fonctionner dans cet article dans lequel il n’y a que deux images .
Deuxièmement , Dès que j’essaye de charger une image un peu lourde , je suis limité par une taille des logos limitée à 1050px . Comment faire pour afficher une miniature qui donnerait en cliquant une image plus lourde ?

Bravo et excusez pour les deux questions pas forcément très en rapport ,

Merci d’avance ,

Kri

Galleria
Jean Christophe Villeneuve - le 24 mars 2014

Bizarre que ça ne fonctionne pas. Qu’as-tu inscrit dans ton article exactement ?

Sinon, la taille des images est volontairement bridée à 1050px de large, ce qui me parait largement suffisant pour les écrans actuels. Elles sont aussi limitées en poids au niveau du serveur (généralement 2Mo). Pour dépasser les limites et faire le rebelle, on peut télécharger ces images par ftp dans le dossier /tmp/upload (à créer si pas existant) et quand tu veux ajouter l’image, tu cliques sur "le serveur" au lieu de "mon ordinateur" dans le bloc "Ajouter une image ou un document". Mais attention à ne pas surcharger le serveur et Spip !

Galleria
Kri - le 24 mars 2014

Merci pour la réponse .

J’avais d’abord écrit deux liens pour afficher les documents :

<docxx|left> et <docyy|right> .

Ça devait provoquer un bug . À présent , j’ai bien un effet de galerie mais qui ne ressemble pas du tout à celui de cet article !

J’ai mis :<galleria15|width=500|lightbox=true»|transition=fade>

Mais ça me donne les noms des photos donnés avant le téléchargement , ce n’est pas très heureux , je ne sais pas comment changer leur nom à présent . J’avoue que j’aurais préféré comme ci-dessus pas de nom du tout ...

Galleria
Jean Christophe Villeneuve - le 25 mars 2014

Là, visiblement, tes images sont dans le portfolio. Sors-les du portfolio et tu devrais avoir ce que tu attends.

Galleria
Kri - le 25 mars 2014

Merci pour l’information .

Effectivement , je revenais ici pour m’apercevoir que je n’avais pas assez lu la doc . De façon surprenante , il faut sortir les images du portfolio . Mea culpa .

Maintenant ça tourne mais j’ai dû me contenter de Galleria simple plutôt que des options plus complexes avec le fade , je crois que c’est dû à la largeur de mes photos , c’est pas grave , je verrai ça plus tard !

Merci c’est super même s’il y a un certain nombre de choses qui m’échappent encore .

Galleria
Jean Christophe Villeneuve - le 25 mars 2014

Ou tu as fait une faute de frappe dans ton raccourci ?

Je vois un " »" après le "lightbox=true" dans ton exemple

Galleria
Kri - le 25 mars 2014

Mais oui bien sûr , c’est bizarre moi qui croyait avoir uniquement fait des copier-coller . Bien vu . C’est corrigé !

C’est à présent super sympa . Jusque là et avec d’autres habillages je me servais notamment du plugin jQuery Cycle mais je deviens un fan de Galleria et de Escal V3 .

Merci et encore bravo !

Galleria
annief - le 4 juillet 2012

Bonjour Jean Christophe
J’ai fait tout ce que tu dis de faire mais cela ne marche pas !!!j’ai installé galleria pour spip, je viens de faire une mise à jour avec escal v2 , j’ai copié collé dans mon article ce que tu mets plus haut en remplaçant XX par le N+° d’article et j’ai pris soin de désactiver mon plugin photo et de ne pas placer les photos dans le portfolio.
A ton avis je fais quoi ?????:’-(:’-))je recommence ?;-)

Galleria
Jean Christophe Villeneuve - le 4 juillet 2012

à tout hasard, vide ton dossier /tmp (sauf /sessions et /visites) er recalcule la page

Galleria
annief - le 17 septembre 2012

après quelques mois passés pas de problème, j’ai trouvé la solution. Je voudrais maintenant changer la couleur du fond, ex : remplacer du blanc par du noir.
Dans personnaliser galleria, je voulais mettre

galleria- container {
background-color: #000000;
}

mais cela ne fonctionne pas, je ne choisis sans doute pas la bonne solution !!!
que faire ?

Galleria
Jean Christophe Villeneuve - le 17 septembre 2012

Je ne comprends pas ton "Dans personnaliser galleria ..."

Moi j’ai mis mes css de personnalisation dans couleurs.css. Les voici :

.galleria-container {
        background-color: #FFFFFF;
}
.galleria-info-link, .galleria-info-text,
.galleria-thumb-nav-left,  .galleria-thumb-nav-right {
        background-color: #336699;
}
.galleria-info-title {
        font-size: 14px;
}
.galleria-info-description {
        color: #ffffff;
}

et comme toujours ces CSS sont surcheables dans le fichier /squelettes/styles/perso.css où tu peux mettre

.galleria-container {
        background-color: #000000;
}

pour reprendre ton exemple

et hop !

Mots-clés associés

Dans la même rubrique



Plan du site Contact Mentions légales Espace rédacteurs squelette

RSS Valid XHTML 1.0 Strict

2009-2017 © Escal V3 - Tous droits réservés
Site réalisé sous SPIP
avec le squelette ESCAL-V3
Version : 3.87.27