Ses photos Flickr sur un mur d'images

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

tiltviewer-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 :

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 :

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.; 25 février 2011 à 01:12
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

--; 26 février 2011 à 22:58
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; 15 août 2011 à 14:05
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; 17 août 2011 à 18:22
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; 21 septembre 2011 à 17:31
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; 21 septembre 2011 à 21:27
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; 22 septembre 2011 à 13:43
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; 22 septembre 2011 à 13:58
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; 13 mars 2012 à 09:01
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; 29 mars 2012 à 22:29
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; 21 février 2013 à 22:21
Prac a dit…: Bonsoir

@Jean Marc

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

Tiltviewer Pro

Cdt; 4 mars 2013 à 21:12