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.




2011/01/06

Un mur d'images avec une galerie en xml

Un mur d'images avec une galerie en xml

Un Diaporama en 3D sous la forme d'un mur d'images avec Tiltviewer

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.xmltiltviewer-gallery.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/gadgets/ifr?
url=http://prac-gadget.googlecode.com/files/tiltviewer-gallery.xml

&up_XML=URL du fichier xml decrivant la galerie
&up_SWF=URL du lecteur Flash (tiltviewer.swf)

Important : Les 2 fichiers *.xml et *.swf doivent être hébergés sur le même Domaine Internet

&up_TIT=titre du diaporama
&up_LNK=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_CCOL=%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




Ajouter ce gadget a Google


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

Enregistrer un commentaire


Rechercher sur le Blog de Prac avec Google CSE