Inutile de vous présenter ce concentré d'Ajax, la référence du partage d'images personnelles sur le web : Flickr

Les fonctionnalités de ce site sont tout simplement énormes : partage, retouche, classement, géolocalisation de vos photos, ce qui pousse tout internaute, du noob au nerd à se servir de cette outil pour référencer ses photos personnelles.

Le but du tutoriel que je vous propose est d'afficher vos photos Flickr sur votre site et/ou blog personnel. Nous allons pour cela nous servir de l'outil Flickrshow développé par Ben Sekulowicz-Barclay

L'installation de Flickrshow est très simple, tout comme sa configuration.

Préambule :

Il vous faut tout d'abord télécharger le fichier Javascript que vous pourrez trouver ici : http://v6.flickrshow.com/scripts/scripts.js

1ère étape : Mise en Place :

Une simple inclusion dans votre fichier PHP/HTML est nécessaire :

<script type="text/javascript" src="js/scripts.js"></script>

Il vous suffit ensuite d'insérer le code suivant à l'endroit où vous voulez afficher votre slideshow, en remplacant "VOTREALBUM" par l'id de votre album que vous trouverez sur Flickr (dans la barre d'adresse, après avoir doublé-cliqué sur votre album). Il est en principe composé de 17 chiffres et lettres.

<div id="fsDemo" style="height:600px;width:400px;">
</div>
<script type="text/javascript">
var cesc = new flickrshow("fsDemo", {flickr_photoset: "VOTREALBUM@N00"});
</script>

2ème étape : Sélection des photos :

L'affichage des photos en fonction de l'album auquel elles correspondent est une chose, mais comment procéder pour afficher toutes ses photos, sans distinction d'album ? Pour cela flickrshow propose différents paramètres :

flickr_photoset : Affiche les photos d'un album précis.
flickr_group : Affiche les photos d'un groupe précis.
flickr_tags : Affiche les photos rattachées à des tags précis (séparez les tags par des virgules lors de la déclaration).
flickr_user : Affiche les photos d'un membre précis.

De plus, il vous est possible de combiner les paramètres "flickr_user" et "flickr_tags" :

var slideshow= new flickrshow("fsDemo", {flickr_tags: "paysage", flickr_user: "jchristophe.d"});

Cela vous affichera donc toutes mes photos portant le tag "paysage".

3ème étape : Modifier l'apparence de Flickrshow :

a. Modifier les couleurs

Ben Sekulowicz-Barclay a développé plusieurs CSS vous permettant de choisir le style de votre Flickrshow parmis différents styles : bleu(blue), vert(green), gris(grey), et rose(pink). Pour sélectionner le thème "green", il suffit de déclarer la variable suivante :

var slideshow= new flickrshow("fsDemo", {flickr_photoset: "VOTREALBUM@N00", theme: "green"});

Si aucune de ces CSS ne vous convient, ou si vous voulez modifier quelques éléments, il suffit de rattacher votre propre CSS, en déclarant, au préalable, la variable suivante :

var slideshow= new flickrshow("fsDemo", {flickr_photoset: "VOTREALBUM@N00", theme: "none"});

Voici la feuille de style (du thème "green") à modifier et à appeler depuis votre squelette pour appliquer votre propre style :

/* WRAPPER
************************************************************************************* */
 
div.fs { background: #E8E8E8 !important; }
 
/* WRAPPER - LOADING
************************************************************************************* */
 
div.fs div.fsLoading { 
	background: #E8E8E8 url("http://v6.flickrshow.com/themes/green/al.gif") 50% 50% no-repeat!important;
	z-index: 500;
}
 
div.fsLoaded-0 div.fsLoading { background-image: url("http://v6.flickrshow.com/themes/green/al.gif") !important; }
div.fsLoaded-1 div.fsLoading { background-image: url("http://v6.flickrshow.com/themes/green/al.gif") !important; }
div.fsLoaded-2 div.fsLoading { background-image: url("http://v6.flickrshow.com/themes/green/al.gif") !important; }
div.fsLoaded-3 div.fsLoading { background-image: url("http://v6.flickrshow.com/themes/green/al.gif") !important;}
div.fsLoaded-4 div.fsLoading { background-image: url("http://v6.flickrshow.com/themes/green/al.gif") !important; }
div.fsLoaded-5 div.fsLoading { background-image: url("http://v6.flickrshow.com/themes/green/al.gif") !important; }
div.fsLoaded-6 div.fsLoading { background-image: url("http://v6.flickrshow.com/themes/green/al.gif") !important; }
div.fsLoaded-7 div.fsLoading { background-image: url("http://v6.flickrshow.com/themes/green/al.gif") !important; }
div.fsLoaded-8 div.fsLoading { background-image: url("http://v6.flickrshow.com/themes/green/al.gif") !important; }
div.fsLoaded-9 div.fsLoading { background-image: url("http://v6.flickrshow.com/themes/green/al.gif") !important; }
div.fsLoaded-10 div.fsLoading { background-image: url("http://v6.flickrshow.com/themes/green/al.gif") !important; }
 
 
/* WRAPPER - SLIDER
************************************************************************************* */
 
div.fs div.fsSlider
{
   background: #D1D1D1 url("http://v6.flickrshow.com/themes/green/sl.gif") !important;
}
 
div.fs div.fsSliderH { 
	background: #99CC00 !important; 
	cursor: pointer;
}
 
/* WRAPPER - BUTTONS
************************************************************************************* */
 
div.fs ol.fsButtons { background: #E8E8E8; }
 
div.fs ol.fsButtons li {
	background: #E8E8E8 50% 50% no-repeat;
	overflow: hidden;
	text-indent: -999px;
	z-index: 300;
}
 
div.fs ol.fsButtons li.fsButtonA { background-image: url("http://v6.flickrshow.com/themes/green/ip.gif") !important; }
div.fs ol.fsButtons li.fsButtonB { background-image: url("http://v6.flickrshow.com/themes/green/ir.gif") !important; }
div.fs ol.fsButtons li.fsButtonC { background-image: url("http://v6.flickrshow.com/themes/green/il.gif") !important; }
 
div.fsPlaying ol.fsButtons li.fsButtonA { background-image: url("http://v6.flickrshow.com/themes/green/is.gif") !important; }
 
/* WRAPPER - IMAGES
************************************************************************************* */
 
div.fs ol.fsImages { background: #D1D1D1; }
 
div.fs ol.fsImages li h2 {
	color: #2E2E2E !important;
	font-family: "Lucida Grande", "Helvetica", "Arial", Sans-serif;
	font-weight: lighter;
	overflow: hidden;
	z-index: 200;
}

b. Modifier la taille des images

Par défaut, Flickr propose plusieurs tailles pour afficher vos images. Elles sont identifiées grâce à des lettres :

s petit carré 75x75
t miniature, côté le plus long de 100
m petit, côté le plus long de 240
- moyen, côté le plus long de 500
b grand, côté le plus long de 1024 (existe uniquement pour de très grandes images d'origine)
o image d'origine, jpg, gif ou png selon le format source

Il suffit donc d'insérer cette lettre dans la variable principal. Exemple pour une taille miniature :

var slideshow= new flickrshow("fsDemo", {flickr_photoset: "VOTREALBUM@N00", size:"_t"});

c. Modifier la vitesse de changement des images

Il vous suffit d'insérer dans la variable le laps de temps entre l'affichage total de 2 photos. Exemple pour 3 secondes :

var slideshow= new flickrshow("fsDemo", {flickr_photoset: "VOTREALBUM@N00", speed:3});

c. Debug Mode

Flickrshow est doté d'un mode de débuggage afin de permettre à l'utilisateur d'identifier les erreurs en cas de non affichage du Slideshow.

var slideshow= new flickrshow("fsDemo", {flickr_photoset: "VOTREALBUM@N00", debug:1});

N'oubliez pas de désactiver le mode debug si votre slideshow fonctionne.

Et voilà pour ce tuto =) Vous pouvez venir voir le résultat sur ma galerie perso ou sur le site officiel de Flickrshow.