Un diaporama dans le corps du message
La bibliothèque Google Ajax Feed API
Paramètrer un Diaporama de Picasa
Plusieurs lecteurs de l'article : Un diaporama pour Blogger ont cherché à incorporer le diaporama dans le corps du message.
Le gadget Diaporama de Blogger s'incorpore dans les éléments de page, mais en utilisant le Flux Media RSS et la bibliothèque Google Ajax Feed API, l'incorporation du Diaporama dans le corps du message ne pose pas de problème. Il est possible de paramètrer le Diaporama et d'afficher la légende de chaque image.
Incorporer ces bibliothèques entre les balises <head> et </head> (sans retour à la ligne à l'intérieur d'un attribut) :
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script src="http://www.google.com/uds/solutions/slideshow/gfslideshow.js" type="text/javascript"></script>
Le style du diaporama
Créons une classe gss pour définir les paramètres du Diaporama. Le style peut être placé entre les balises <head> et </head>. Si le style n'est utilisé que pour un seul message, il est possible de charger dynamiquement celui-ci avec quelques lignes de javascript.
<style type="text/css">
.gss a img {border: 0 none;}
.gss
{
padding: 8px;
margin: auto;
width: 250px;
color: #dddddd;
height: 200px;
background-color: #ccc;
}
</style>
Le Flux Media RSS
C'est la source du Diaporama : un fichier en format xml fourni par l'hébergeur. Dans le cas de Picasa, pour obtenir l'adresse de ce flux il faut se connecter à son compte, ouvrir l'album, puis copier l'adresse indiquée sous RSS :
L'adresse est de la forme suivante :
http://picasaweb.google.com/data/feed/base/user/USER_NAME/albumid/USER_ID?alt=rss&kind=photo&hl=fr
Le javascript
Il faut incorporer le script suivant dans le html du message. J'ai pris l'exemple des Chats de Noiraigue, avec l'aimable permission de Danielle.
<script type="text/javascript">
function load_picasa()
{
var feed_picasa =
"http://picasaweb.google.com/data/feed/base/user/philippe.chappuis/albumid/5241134795635578401?alt=rss&kind=photo&hl=fr";
var options = {
fullControlPanel: true,
fullControlPanelSmallIcons: true,
thumbnailSize: GFslideShow.THUMBNAILS_LARGE,
pauseOnHover: true,
displayTime: 3000,
transitionTime: 1000,
feedLoadCallback: FeedTitle,
transitionCallback: TransitionHandler,
scaleImages : true,
linkTarget: google.feeds.LINK_TARGET_BLANK
};
new GFslideShow(feed_picasa,"chats_noiraigue", options);
}
function TransitionHandler(entry, transitionTime)
{
if (document.getElementById)
{
document.getElementById("image_title").innerHTML = entry.title;
}
else
if (document.all)
{
document.all["image_title"].innerHTML = entry.title;
}
}
function FeedTitle(result)
{
if ( result.error ) { alert("Erreur au chargement des images"); }
else
{
if (document.getElementById)
{
document.getElementById("feed_title").innerHTML = result.feed.title;
}
else if (document.all)
{
document.all["feed_title"].inner = result.feed.title;
}
}
}
google.load("feeds", "1");
google.setOnLoadCallback(load_picasa);
</script>
Quelques explications sur le script
load_picasa contient l'adresse du flux Media RSS dans la variable feed_picasa à saisir sans retour à la ligne. L'objet options contient les paramètres du Diaporama. Le dernier paramètre doit être saisi sans virgule à la fin. La signification des paramètres est donnée dans le guide du programmeur des Google AJAX Feed API.
feedLoadCallback définit le nom de la fonction qui s'exécute à l'ouverture du Diaporama : FeedTitle. Le titre du Diaporama sera placé dans le bloc div d'identifiant "feed_title".
transitionCallback définit la fonction appelée lors du chargement de chaque image : TransitionHandler. La légende de chaque image sera placée dans le bloc div d'identifiant "image_title".
Le diaporama quant à lui sera placé dans le bloc div d'identifiant "chats_noiraigue".
Attention : Le script doit être saisi dans le html du message, au début, et sans retour à la ligne ! Le plus simple est d'utiliser notepad, de coller le code ci-dessus, puis en utilisant Affichage / Sans retour à la ligne, de supprimer tous les retours à la ligne (delete en fin de ligne). Le script à coller dans Blogger doit tenir sur une seule ligne.
Dans le cas contraire, Blogger ajoute un tage <br/> ce qui provoque une erreur, <br/> n'étant pas un code javascript valide.
Le code html
Trois blocs sont utilisés. Ils servent de conteneur au titre du Diaporama, au Diaporama lui-même et à la légende des images. Le style du Diaporama est défini par la classe gss. Le style du titre et des légendes est fixé en ligne par l'attribut style.
<!-- Titre -->
<div style="text-align: center; margin-bottom: 5px;" id="feed_title"></div>
<!-- Diaporama -->
<div id="chats_noiraigue" class="gss" >En cours de chargement...</div>
<!-- Legende -->
<div style="text-align: center; font-weight: bold; margin-top: 5px;" id="image_title"></div>
Le résultat
Utiliser Un Gadget Google
En plaçant le code décrit ci-dessus dans un Gadget Google, l'insertion d'un Diaporama devient très simple. L'article du Blog d'Aide pour Blogger decrit la méthode pour insérer un Gadget Google dans le corps du message.
Des gadgets pour son Blog. Quelques Gadgets à insérer sur son Blog ou son site.
Imprimer le message Viti-Vino. Le Blog de Prac - Les Outils Google: Un diaporama dans le corps du message
5 commentaires:
Wow, c'est un beau "tutoriel" pour incorporer quelques photos. Je vais garder cet article dans mes favoris car je ne suis pas sur d'avoir tout compris.
Bonjour,
et merci pour ce tutoriel que j'ai implémenté dans le blog suivant :
http://aubergedebrison.blogspot.com/
Impeccable avec firefox mais j'ai un problème avec IE.
J'ai vérifié sur ce site en IE et c'est la même chose pas de chatons !!!
la cadre qui devrait accueillir les photos affiche désespérément "en cours de téléchargement".
Quelqu'un aurait-il une idée ?
Bonsoir Titi
J a eu ce problème avec IE6. Une incompatibilité entre 2 scripts. C est pour cela que j ai poursuivi et que j ai finalement inclu le diaporama dans un gadget.
Voir Des gadgets pour son blog
Il n'y a plus ce problème avec IE7
Merci de votre intérêt
bonjour, vous êtes ma dernière chance...
voilà, j'ai un compte photobucket avec lequel je fais des diaporamas. j'aimerais insérer un des diaporamas dans un message. PB : quand je colle le code html et que je fais "aperçu", tout va très bien mais, une fois que je veux publier, un bandeau apparaît avec écrit "erreur du code html"... et rien n'est publié...
je ne comprend pas très bien les html et encore moins les flash et les flux rss... je veux juste savoir s'il est possible de résoudre mon problème ou sinon s'il existe un site comme photobucket qui génère des codes que je puisse directement coller dans mes messages sans trop me prendre la tête...
mille mercis de bien vouloir me répondre,
bonne soirée,
à très vite j'espère.
thibault.
bonsoir Thibault
C est ce genre de diaporama qu il vous faut
Diaporama Photobucket- une fois enregistre sur photobucket, click sur Share de votre diapo. Choisir l option get link code puis copier le code (la derniere option) Flash for websites & blogs
- il faut juste corriger le code donne par photocucket, ajouter la balise fin de </embed>
<embed ......>XXX<a href=....
mettez </embed> a la place de XXX
Donnez moi votre mail en cas de probleme
Bonne fin de we
Enregistrer un commentaire