Message des administrateurs

Ce blog est le prolongement, le complément du Groupe d'aide Blogger en français. Vous pourrez y trouver, au fur et à mesure qu'ils seront reproduits ici, les conseils donnés au fil des messages sur le Groupe. C'est une simplification pour vos recherches d'aide sur les blogs de Blogger. Vous êtes cordialement invités à participer à cette compilation. Pour ce faire, il vous suffit de m'adresser un mail à cette adresse et dans les meilleurs délais, nous nous efforcerons de changer votre inscription afin que vous puissiez intervenir. Comme il s'agit d'un blog, vous pourrez également laisser vos commentaires - toujours les bienvenus - pour améliorer tant le contenu que le contenant.


Groupe d'aide Blogger en français

Google Groupes
Abonnez-vous au groupe Aide Nouveau Blogger en français
E-mail :
Visiter le groupe

mercredi 5 janvier 2011

Ses photos Flickr sur un mur d'images

Le gadget Diaporama de Blogger permettant d'afficher les images d'un compte Flickr utilise un Flux Media RSS. Il existe de nombreux prestataires tiers qui proposent un Diaporama en Flash.

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

Images de Flickr avec Tiltviewertiltviewer-flickr.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 ce message du Blog d'Aide pour Blogger.

Pour ce gadget, les codes sont donnés sur la page Diaporama Flickr avec Tiltviewer.


Le tag iframe

A saisir sans espace ni retour à la ligne :


<iframe
style="width: 440px; height: 390px;"
src="http://www.gmodules.com/gadgets/ifr?
url=http://prac-gadget.googlecode.com/files/tiltviewer-flickr.xml
&up_UID=User ID, l'identifiant utilisateur de Flickr

Utiliser IdGettr pour trouver l'identifiant

&up_TIT=Titre du diaporama
&up_LNK=URL du lien sur le titre

&up_SW=Largeur en pixels du diaporama
&up_SH=Hauteur en pixels 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 du cadre
&up_CCOL=%23rrggbb couleur du conteneur
"
allowTransparency="true"
frameborder="0" scrolling="no">
</iframe>




Affichage plein écran

Faire un clic droit, puis choisir Full screen.


Un exemple

J'utilise le code suivant pour afficher les photos de mon compte Flickr :


<iframe style="width: 440px; height: 390px;"
src="
http://www.gmodules.com/gadgets/ifr?url=http://prac-gadget.googlecode.com/files/tiltviewer-flickr.xml

&up_UID=42038249@N00

&up_TIT=Clos%20Domaines%20et%20Ch%C3%A2teaux
&up_LNK=http://www.liens-du-vin.ch/vision_cdc.htm

&up_SW=420
&up_SH=360
&up_TCOL=%23112233
&up_BBOCOL=%23eeeecc
&up_BBICOL=%23112233
&up_PFCOL=%23558866
&up_PBCOL=%23bbbbbb
&up_BFCOL=%23eeeecc
&up_BDCOL=%23558866
&up_CCOL=%23eeeecc
"
allowTransparency="true"
frameborder="0"
scrolling="no">Gadget Google - Les photos de Flickr sur un mur d'images</iframe>






Plus d'informations

Un mur d'images avec une galerie en xml

Les vignettes d'un ensemble de photos de Flickr avec un Gadget Google

Les vignettes d'un ensemble de photos de Flickr avec un Gadget Blogger

Un Diaporama de Flickr sur son Blog

Galerie horizontale de photos affichées en accordéon

Les vignettes d'un album Picasa sur son Blog

Insérer un gadget dans le corps du message

Tiltviewer, le site


Crédit photos

Association Clos Domaines et Châteaux

12 commentaires:

valios a dit…

merci pour le tuto. Cela m'a bien aidé. Par contre en remplaçant "script" par iframe cela ne fonctionne pas. J'ai laissé script.

Prac a dit…

Bonsoir

@valios

Tres belles photos et magnifiques costumes. Voila le code iframe qui fonctionne

remplacer {} par <> et coller sans espaces ni retour a la ligne

{iframe style="width: 490px; height: 400px;" src="http://www.gmodules.com/ig/ifr?url=http://hosting.gmodules.com/ig/gadgets/file/108621208120033273647/tiltviewer-gadget.xml&up_UID=59319483%40N05&up_SWF=http%3A%2F%2Fsites.google.com%2Fsite%2Fannuairevin%2Ffiles%2FTiltViewer.swf&up_TITLE=ROSHEIM%202011&up_LINK=http%3A%2F%2Fwww.flickr.com%2Fphotos%2F59319483%40N05%2Fsets%2F72157626130543200%2F&up_SW=420&up_SH=320&up_TCOL=%23993300&up_BBOCOL=%23c3d9ff&up_BBICOL=%23000000&up_PFCOL=%23c3d9ff&up_PBCOL=%23cccccc&up_BFCOL=%23c3d9ff&up_BDCOL=%23cc0000&up_ContainerCol=%23cfd9f6" allowTransparency="true" frameborder="0" scrolling="no"}Gadget Google - Diaporama Tiltviewer{/iframe}

Cdt

--

prac

--

Séverine Cotting a dit…

bonjour je n'arrive pas à trouver le lien pour afficher mes images en diaporama dans mon blog.
concernant cette ligne de code... que dois-je mettre:
&up_LNK=
je ne trouve pas et ça fait un moment que je cherche merci d'avance pour votre aide.
Séverine

Prac a dit…

Bonsoir

@Slayko

- up_LNK= est un parametre permettant de definir un lien (une adresse URL) de facon à mettre le titre du diaporama en zone chaude ( = le rendre clickable). Mettez l adresse de l album d origine, ou l adresse d une page relative au sujet des photos

Cdt

Gaëtan R. a dit…

merci pour le tuto

par contre, je n'y arrive pas à mettre mes images

avec l'exemple donné ci dessus cela fonctionne, par contre, ca ne marche pas avec mes photos

je pense que c'est un pb d'ID de l'album
pour le connaitre, je vais à l'adresse :
http://idgettr.com/
et je rentre l'url de mon album récupérée sur la page de picasa : "https://picasaweb.google.com/...?authuser=0&feat=directlink"
mais j'ai un numéro d'ID qui ne fonctionne pas en retour : 21879932@N02

merci

Prac a dit…

Bonsoir Gaetan

- Le mur d images Tiltviewer ne fonctione qu avec un album Flickr, pas avec un album Picasa

Utilisé les vignettes ou le diaporama a partir d un album Picasa

Cdt

Gaëtan R. a dit…

pffff.... autant pour moi j'ai pas fait attention
je confonds souvent les choses ...

pour connaitre son ID flickr (et d'autres infos sur son compte flickr), on peut directement aller sur le lien suivant en étant connecté à flickr :
http://www.flickr.com/services/api/explore/?method=flickr.people.findByUsername

Gaëtan R. a dit…

pour contrôler voter ID :
http://www.no3dfx.com/polaroid/

par contre, un truc que je ne comprends pas : si je supprime des photos de mon album flickr, les photos supprimées sont toujours présentes sur le mur d'image ou le polaroid gallery ... bizarre :s

Amel a dit…

Bonjour je voudrais inserer mes photos de recette en défilement sous l'entete du titre du blog de facon à se qu'il prend la longueur horizontale du blog ou de sorte à ce qu'il soit l'image du top j'ai essauer plusieurs site et logiciel mais ils me donnent soit un diaporama juste à droite du blog ou bien à gauche mais pas tout au long du blog comment faire maerci
Merci

Prac a dit…

Bonsoir

@Amel Bh

- Pour votre Blog Sans Gluten chez nous

je vous suggere d utiliser l un des gadgets Picasa, dans la version Gadget Google. Prenez la version 1600 pour avoir la largeur de len tete. Il suffit de coller le code du iframe dans un gadget html / javascript a coller dans l en tete de votre Blog. Ecrivez moi sur mon mail en cas de problemes

les infos ici : http://www.liens-du-vin.ch/picasa-gadget-script.htm

Cdt

Jean Marc a dit…

Bonsoir,
Merci pour votre code qui fonctionne très bien.
Par contre j’aimerais savoir s'il est possible de modifier le nombre de colonnes et de rangées du mur d'images.
Et aussi s'il est possible de sélectionner certaines images dans flickr, car apparemment toutes mes photos publics sont sélectionnées.
Merci.
Jean Marc

Prac a dit…

Bonsoir

@Jean Marc


Malheureusement non, il faut passer à la version Pro de Tiltviewer

Tiltviewer Pro

Cdt