Blogger
Viti-Vino - Les outils Google pour Blogger

Les trucs et astuces pour Blogger. Pour personnaliser son Blog. Un complément de l'aide en ligne.




2008/10/25

Un diaporama dans le corps du message



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.


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

Flux Media 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






En cours de chargement...





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.


Rechercher sur le Blog de Prac avec Google CSE