BIENVENUE !

«Les évènements ne sont que l'écume des choses, ce qui m'intéresse, c'est la mer»

Paul Valéry, Regards sur le monde actuel 1931


mardi 26 février 2008

Diaporamas pour blog

Blogger propose depuis quelques temps la possibilité d'insérer un diaporama en "ajoutant un élément à la page". Pour la méthode je vous renvois au Blog d'aide pour Blogger qui explique bien la démarche.
Mais ce n'est pas applicable pour un diaporama destiné à être inséré dans un billet. Voici une autre méthode pour obtenir ceci :

PicasaPlein écran


Il s'agit d'un diaporama "Picasa"qui nécessite d'avoir hébergé son album photos sur son espace PicasaWeb bien-sûr...
Voici le code à insérer en "mode html":

<div style="background:#000;max-width:450px;margin:0 auto;text-align:center;line-height:0"><div style="width:100%;height:400px;padding:0;margin:0"><iframe style="width:100%;height:100%" src="adresse de votre album" frameBorder=0 scrolling=no></iframe></div>
<a href="http://neo-sphere.blogspot.com/search/label/Picasa"><img style="border:none;padding:0;margin:0;float:right" src="http://btemplates.googlepages.com/picasa.png" title="Billets sur Picasa" alt="Picasa" /></a>
<a href="adresse de votre album" onclick="window.open(this.href,'Diaporama','type=fullWindow,
fullscreen,toolbar=no,menubar=no,location=no,
resizable=yes,scrollbars=no,status=no');return false"><img style="border:none;padding:0;margin:0" src="http://btemplates.googlepages.com/pleinecran.gif" alt="Plein écran" /></a></div>

  1. Sur votre espace Picasaweb, rendez vous sur la page de votre album, en haut à gauche faites un clic droit sur "diaporama"et copiez l'adresse de l'album. C'est cette adresse qu'il faut entrer dans le code aux endroits indiqués.
  2. Définissez la taille maxi du cadre du diaporama (width: largeur, height: hauteur)
  3. La partie du code en vert correspond au logo Picasa en bas à droite, elle n'est pas indispensable. Personnellement j'en ai profité pour faire un lien vers mes autres billets qui traitent de Picasa.
Comme vous le voyez ce diaporama peut être affiché en "plein écran", c'est plus sympa pour présenter des photos non ?
Pour ceux qui n'entendent rien au "HTML" Zunéo.fr a pensé à vous :entrez l'adresse de votre diaporama, cliquez sur "Blogger" et vous obtiendrez le code tout prêt à copier-coller !
De même si vous hébergez vos photos sur Flick Zunéo.fr a également pensé à vous avec un superbe diaporama flash...

14 Comments:

Moua : Explorateur de la bio(-blogo)sphère said...

Superbe photos !

viti-vino said...

Bonsoir

Avec les flux media RSS il est possible d inserer un diaporama dans le corps d un message. A partir de Picasa, Flickr ou Photobucket

Les informations ici

Diaporama

blogaetan.net said...

Salut Blogus,
merci pour le lien dans ton
"J'aime bien..."

Renee said...

Ca y est ça fonctionne... Mais peut-on changer la couleur noire du tour des photos ??? ce serait plus sympa. Merci d'avance

Blogus said...
Ce message a été supprimé par l'auteur.
Blogus said...

à Rénée...
Essaie de changer le background au début du code .
Tu as les codes couleurs

Blogus said...

désolé pour le lien qui ne s'affiche pas...L'adresse :
http://www.henri-ruch.ch/HTML/Couleurs/couleurs.asp

winsa said...

Salut,

Comment faire pour stopper le défilement des photos pour que ça ne soit pas trop lourd sur le site ?

Merci
winsa

Anonyme said...

Bonsoir,
Super ces conseils le diapo fonctionne trés bien, que faire pour eviter qu'il recommence en plein écran aprés la derniére photo.
Merci
Jacques

Blogus said...

Désolé pour les deux derniers commentaires mais je ne sais pas trop!
Il y a peut-être une commande "en boucle" dans le code ??

Motylka said...

Génial ! Ce serait encore mieux si...
si, une fois en mode plein écran, en cliquant sur la croix, on revenait au blog au lieu d'atterrir sur Picasaweb. Un moyen ?

Blogus said...

Tu peux essayer de supprimer "retour false" pour forcer l'utilisateur à mettre fin au diaporama en fermant la fenêtre ou en utilisant le bouton retour de son navigateur.

Fox Prime said...

Ton code est foireux, j'ai du le revoir moi-même et maintenant c'est bon

Par contre je cherche un moyen de recentrer la barre avec les flèches et le bouton pause si quelqu'un sait. Merci d'avance.

Anonyme said...

Salut

Merci pour le blog et pour les infos.
Histoire d'apporter ma pierre à l'édifice, je voulais exposer le problème que j'ai rencontré avec ta méthode et comment je l'ai résolu.


Le problème
-----------
J'ai copié ton code et j'ai cherché dans mon Picasa-Web-Album l'adresse du flux RSS... Bigre !
Naivement j'ai ouvert l'album, cliqué sur le lien "RSS" (à droite) et copier l'adresse proposé dans la barre d'adresse du navigateur... et ça marchait pas !!! En fait, dans le blog s'affichait dans le cadre prévu la page affichée après avoir cliqué sur "RSS" (c'est pas clair... en fait on voyait ça http://picasaweb.google.fr/data/feed/base/user/fwillaume/albumid/5169799247865874753?alt=rss&kind=photo&hl=fr


La solution
-----------
Après plusieurs grattages de tête et moultes tentatives, j'ai regardé ton code de plus près et constaté que l'adresse du flux RSS ne correspond pas mais alors pas du tout à celle que j'utilisais ! Diantre.
En fait, j'ai "bricolé" une adresse à partir de l'adresse de l'album donné par Picasa (un truc du genre "http://picasaweb.google.fr/fwillaume/BestOf2007#" et j'ai ajouté "/photo#s" suivi du numéo mystérieux donné par Picasa dans la barre d'adresse (dans ton cas "5169799247865874753") du navigateur quand on clique sur le lien "RSS"


Moralité
--------
"adresse de votre album"
=
http://picasaweb.google.fr/fwillaume/BestOf2007/photo#s5169799265045743954

En espérant avoir été clair (il est tard, désolé)