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
gadget-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>
Gadget Google - Galerie horizontale de photos affichées en accordéon
Plus d'informations
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

   Les Liens du Vin