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.
02 nov. 2009
novembre 2011
