Un Diaporama pour Blogger

Ajouter un Diaporama (Slideshow) à son Blog


Il est possible depuis novembre 2007 d'ajouter un Diaporama comme élément de page. Ce nouveau widget est compatible avec les hébergeurs qui fournissent un flux media RSS.

Le Flux Media RSS

La source du Diaporama doit être un flux RSS au format media RSS. Les principaux hébergeurs de photos sur Internet proposent maintenant ce format. C'est simplement un fichier texte en format xml/rss, contenant le descriptif des medias à diffuser (son, image ou vidéo).

Titre

Le titre du Diaporama. Limiter le nombre de caractères si le diaporama doit être dans une colonne.

Source - Picasa Albums Web

Picasa, l'hébergeur d'images de Google, offre 2 options, soit l'affichage des images avec une sélection par mot clé, soit l'affichage d'un album précis. Dans ce cas il faut saisir le nom de l'utilisateur Picasa, suivi du nom de l'album.
Important : L'option mot clé doit être utilisée avec précaution car elle affiche toutes les images publiques ayant ce mot clé (tag / étiquette). Pensons aussi aux éventuels problèmes liés au droit d'auteur.

Source - Flickr

Flickr offre aussi 2 options, sélection des images par mot clé et par client. Mot clé fonctionne comme pour Picasa, l'otion client quant à elle demande le nom d'utilisateur Flickr. Celui-ci figure dans la barre d'adresse de Flickr, après avoir ouvert votre compte et cliqué sur Your Photos. Dans mon cas, l'adresse est :

http://www.flickr.com/photos/prac53/

Et le client à saisir : prac53

Source - Photobucket

Cet hébergeur n'offre qu'une seule possibilité, par mot clé. Ce sont les tags placés sur les images. Ne jamais perdre de vue qu'avec cette option l'ensemble des photos de Photobucket, avec un mot clé donné, sera affiché.

Source - Autre

Cette dernière option est certainement la plus utile. La sélection par mot clé ne permettant pas d'afficher uniquement ses propres images, l'option autre va nous permettre d'indiquer le flux media RSS de l'album à afficher.
Pour Photobucket, par exemple, se rendre dans afficher un album, puis copier le raccourci du bouton Album Feed. On obtient alors une URL comme celle-ci :

http://s266.photobucket.com/albums/ii244/prac53/feed.rss

Il suffit de recopier cette adresse dans la zone Flux.

Modifier la taille du Diaporama

Créer le Diaporama, puis se rendre dans le panneau de contrôle de Blogger. Cliquer sur Paramètres puis Mise en page et Modifier le code HTML. Choisir Développer des modèles de Gadget.
Rechercher le bloc div suivant :

<div class='slideshow-container' expr:id='data:widget.instanceId + "_slideshow"'>

Ajouter les dimensions désirées, par exemple 350 x 260 :

<div class='slideshow-container' expr:id='data:widget.instanceId + "_slideshow"' style='width: 350px; height: 260px;'>

Exemple

Un diaporama réalisé à partir de mon album sur Photobucket, Les Clos Domaines et Châteaux, sur le blog tendance9.

Utiliser directement le flux media RSS

Google, grâce à Google AJAX Feed API permet de configurer soi-même un diaporama, et d'y incorporer ses propres effets de transition et ses propres contrôles.

Incorporer la bibliothèque de code AJAX

Il suffit de 2 scripts :

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

Appel du Diaporama

Il est réalisé par le script suivant, qui définit la fonction de callback. Le détail des valeurs est donné dans le manuel de référence. La variable flux contient le nom du flux media RSS à traiter.

<script type="text/javascript">

function load()
{
var flux = "http://feed266.photobucket.com/albums/ii244
/prac53/Travail-Vigne/feed.rss";
var options = {
fullControlPanel: true,
fullControlPanelSmallIcons: true,
thumbnailSize : GFslideShow.THUMBNAILS_LARGE,
pauseOnHover: true,
displayTime: 3000,
transistionTime: 1000,
linkTarget : google.feeds.LINK_TARGET_BLANK
};
new GFslideShow(flux, "travail_vigne", options);
}

google.load("feeds", "1");
google.setOnLoadCallback(load);
</script>

Positionner le Diaporama

Le code html suivant appelle le Diaporama :

<div id="travail_vigne" class="gss">En cours de chargement...</div>

Le style du Diaporama

Le style pour la classe gss :

.gss a img
{
border : none;
}

.gss
{
width: 229px;
height: 206px;
color: #dddddd;
background-color: #558868;
border: 1px solid red;
padding: 4px;
}

Pour ne pas alourdir ce blog avec ce style, je charge la feuille de style uniquement pour ce message, avec l'astuce décrite ici : Un style pour un seul message. La feuille de style peut être téléchargée ici.


Le résultat

Un Diaporama Le Travail de la Vigne - La Valeur de l'Homme (crédit photos : Regis Colombo pour l'Association Clos Domaines et Châteaux) :

En cours de chargement...

Le cas particulier de Yahoo

Yahoo, bien qu'à l'origine des spécifications du format media RSS fournit un flux d'actualité de photos qui n'est pas compatible avec ses propres recommandations.
Il faut corriger l'adresse du flux avec cette fonction :

function myUrlResolver(entry) {
var content = entry.content;
var start = content.indexOf("src=")+5;
var stop = content.indexOf(".jpg?",start)+4;
var thumburl = content.substring(start,stop);
return(thumburl); }

Ce qui donne la fonction callback suivante :

function load_yahoo() {
var flux = "http://rss.news.yahoo.com/imgrss/832";
var options = {
fullControlPanel: true,
fullControlPanelSmallIcons: true,
thumbnailSize: GFslideShow.THUMBNAILS_SMALL,
pauseOnHover: true,
displayTime: 2000,
transistionTime: 500,
linkTarget: google.feeds.LINK_TARGET_BLANK,
thumbnailUrlResolver : myUrlResolver
}

Et voici le résultat, avec le flux media RSS des photos des actualités science (disponible seulement sur yahoo.com en anglais) : :

En cours de chargement...

Rappel : Insertion de scripts sur Blogger

Les scripts mentionnés ici peuvent être insérés entre les balises <head> et </head> (Paramètres/Mise en page/Modifier le code HTML).
Dans ce cas ils seront actifs pour tous les messages du blog. Pour ne les activer que pour un seul message, il est possible de les saisir au début du texte. Attention cependant, dans ce cas, saisir le script sans retour à la ligne entre les balises <script> et </script>.

En savoir plus

Video : Utilité et fonctionnement des flux RSS

Utiliser un flux media RSS avec Google Page Creator