Magazine Blog

Un mur d'images avec une galerie en xml

Publié le 06 janvier 2011 par Philippe Chappuis @prac53
Les diaporamas basé sur un Flux Media RSS sont limités en terme d'effets graphiques. Il existe de nombreux prestataires tiers qui proposent un Diaporama en Flash avec des effets très élaborés.
Tiltviewer permet d'afficher un mur d'images. (To tilt : pencher, incliner).
Pour créer le diaporama il faut insérer un script qui appel le lecteur Flash tiltviewer.swf.
L'insertion du diaporama dans un message du blog ou un gadget html / javascript est grandement simplifiée en utilisant un Gadget Google.
Url du gadget
tiltviewer-gallery-gadget.xmltiltviewer-gallery-gadget.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 dans le message du Blog d'Aide pour Blogger.
Pour ce gadget, les codes sont donnés sur la page : un Gadget Google pour afficher un mur d'images avec Tiltviewer.
Le code du iframe
<iframe
style="width: 560px; height: 430px;"
src="
http://www.gmodules.com/ig/ifr?url=http://hosting.gmodules.com
/ig/gadgets/file/108621208120033273647/tiltviewer-gallery-gadget.xml
&up;_XML=URL du fichier xml decrivant la galerie
&up;_SWF=URL du lecteur Flash (tiltviewer.swf)
&up;_TITLE=titre du diaporama
&up;_LINK=lien sur le titre du diaporama
&up;_SW=largeur du diaporama
&up;_SH=hauteur du diaporama
&up;_MAX=la plus grande dimension de la plus grande image du diaporama
&up;_TCOL=%23rrggbb couleur du titre
&up;_BBOCOL=%23rrggbb couleur externe du fond
&up;_BBICOL=%23rrggbb couleur interne du fond
&up;_PFCOL=%23rrggbb couleur du cadre des images
&up;_PBCOL=%23rrggbb couleur du verso des images
&up;_BFCOL=%23rrggbb couleur de l'entourage
&up;_BDCOL=%23rrggbb couleur de la bordure
&up;_ContainerCol=%23rrggbb couleur du conteneur
"
allowTransparency="true"
frameborder="0"
scrolling="no">
</iframe>
Le fichier xml
<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>
<tiltviewergallery>
 <photos>
  <photo imageurl="URL image" linkurl="lien plus d'infos">
  <title>titre de l'image</title>
  <description>
  <![CDATA[ La description de l image.
Les tags <u>, <i> et <b> sont admis ]]>
  </description>
 </photo>
  ........................
  </photos>
<tiltviewergallery>
Un exemple de fichier xml valide :  gallery-swiss-wineries.xml
Affichage plein écran
Faire un clic droit puis choisir Plein écran
Hébergement sur Google Sites
Le lecteur Flash (Tiltviewer.swf) ainsi que la galerie xml peuvent être hébergés sur Google Sites (page classeur).
Il faut cependant respecter les restrictions suivantes : 
Fichier xml : - Ne pas utiliser l'adresse classique du fichier xml :
http://sites.google.com/site/NOMSITE/.../galerie.xml
mais utiliser la forme sécurisée de l'adresse :
http://nnn...nnn-a-mmm...mmm-s-sites.googlegroups.com/site/NOMSITE/.../galerie.xml
Pour obtenir l'adresse du fichier, télécharger le fichier xml depuis la page classeur (sous IE), puis avec l'explorateur Windows, retouvez ce fichier dans les fichiers temporaires Windows et recopier l'adresse Internet (Documents and Settings/user/local Settings/Temporary Internet Files)
Images - Les fichiers définis dans la galerie xml doivent être hébergés par un site appartenant à un Domaine Google (Google Sites, Picasa, ...)
Un exemple
Les images des plus beaux domaines viticoles suisses
Gadget Google - Diaporama Tiltviewer à partir d'une galerie en xml

Plus d'informations
Ses photos de Flickr sur un mur d'images
Une galerie horizontale en accordéon
Les vignettes d'un album Picasa sur son Blog
Un gadget Google pour ajouter un diaporama dans le corps du message
Tiltviewer, le site
Crédit photos
Association Clos Domaines et Châteaux


 Un mur d'images avec une galerie en xml  Les Liens du Vin  Un mur d'images avec une galerie en xml


Retour à La Une de Logo Paperblog

A propos de l’auteur


Philippe Chappuis 96 partages Voir son profil
Voir son blog

l'auteur n'a pas encore renseigné son compte

Magazines