Blogger
Viti-Vino - Les outils Google pour Blogger

Les trucs et astuces pour Blogger. Pour personnaliser son Blog. Un complément de l'aide en ligne.




2010/12/12

Une galerie pour afficher des images en accordéon

L'affichage en accordéon se réalise simplement avec quelques lignes de CSS. La méthode est décrite dans l'article de Stu Nicholls : Sliding Photograph Galleries.

J'avais utilisé cet exemple pour utiliser une feuille de style pour un seul message.

Un Gadget Google permet d'insérer une galerie horizontale, avec les photos affichées en accordéon.

URL du gadget

Galerie horizontalegadget-slide-horizontal.xml



Insertion du gadget

Le gadget peut être inséré dans le html d'un message de Blogger ou dans un gadget HTML / Javascript. Pour obtenir le code du tag iframe ou la source du script, il faut utiliser la méthode décrite sur le Blog d'Aide pour Blogger.

Pour le gadget, les codes sont donnés sur la page galerie horizontale.

Le tag iframe

A saisir sans espace ni retour à la ligne :


<iframe style="width: 540px; height: 260px;"
src="
http://www.gmodules.com/ig/ifr?url=http://hosting.gmodules.com/ig/gadgets/file/108621208120033273647/gadget-slide-horizontal.xml

&up_Pic1=URL image 1 (taille 320 x 240)
&up_Title1=Titre image 1
&up_Pic2=URL image 2
&up_Title2=Titre image 2
&up_Pic3=URL image 3
&up_Title3=Titre image 3
&up_Pic4=URL image 4
&up_Title4=Titre image 4
&up_Pic5=URL image 5
&up_Title5=Titre image 5
&up_Pic6=URL image 6
&up_Title6=Titre image 6
&up_Pic7=URL image 7
&up_Title7=Titre image 7
&up_BackPic=URL image de fond (taille 488 x 240)

&up_BorderCol=%23rrggbb couleur bordure
&up_BackCol=%23rrggbb couleur fond
"
allowTransparency="true"
frameborder="0"
scrolling="no">
Gadget Google - Galerie horizontale de photos affichées en accordéon</iframe>




Un exemple

J utilise le code suivant pour afficher les images des Clos Domaines et Châteaux


<iframe style="width: 540px; height: 260px;"
src="http://www.gmodules.com/ig/ifr?url=http://hosting.gmodules.com/ig/gadgets/file/108621208120033273647/gadget-slide-horizontal.xml&up_Pic1=http%3A%2F%2Fwww.liens-du-vin.ch%2F_pic062%2Fchateau-maison-blanche.jpg&up_Title1=Ch%C3%A2teau%20Maison%20Blanche&up_Pic2=http%3A%2F%2Fwww.liens-du-vin.ch%2F_pic062%2Fdomaine-manoir.jpg&up_Title2=Domaine%20du%20Manoir&up_Pic3=http%3A%2F%2Fwww.liens-du-vin.ch%2F_pic062%2Fchateau-vufflens-c-d-c.jpg&up_Title3=Ch%C3%A2teau%20de%20Vufflens&up_Pic4=http%3A%2F%2Fwww.liens-du-vin.ch%2F_pic062%2Fchateau-allaman.jpg&up_Title4=Ch%C3%A2teau%20d'Allaman&up_Pic5=http%3A%2F%2Fwww.liens-du-vin.ch%2F_pic062%2Fchateau-chatagnereaz.jpg&up_Title5=Ch%C3%A2teau%20de%20Ch%C3%A2tagner%C3%A9az&up_Pic6=http%3A%2F%2Fwww.liens-du-vin.ch%2F_pic062%2Fdomaine-martheray.jpg&up_Title6=Domaine%20du%20Martheray&up_Pic7=http%3A%2F%2Fwww.liens-du-vin.ch%2F_pic062%2Fdomaine-autecour.jpg&up_Title7=Domaine%20de%20Autecour&up_BackPic=http%3A%2F%2Fwww.liens-du-vin.ch%2F_pic062%2Fback-slide-brown.jpg&p_BorderCol=%239e5205&up_BackCol=%23f6f6f6" allowTransparency="true" frameborder="0" scrolling="no">Gadget Google - Galerie horizontale de photos affichées en accordéon</iframe>






Plus d'informations

Ses photos Flickr sur un mur d'images

Les vignettes d'un album Picasa sur son Blog

Un style pour un seul message de Blogger

Insérer un gadget dans le corps du message

Crédit photos

Association Clos Domaines et Châteaux


Rechercher sur le Blog de Prac avec Google CSE