Un diaporama dans le corps du message
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.
La bibliothèque Google Ajax Feed API
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 fournit 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 quand à 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éfinit 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
En cours de chargement...
Jeu de briques
Snake
Pacman
Bubble