Créer un slideshow de photo à la manière de Flickr

Publié le 04 mars 2008 par Dave Lizotte
Depuis longtemps je cherchais une manière d'implanter sur un site web un carrousel (slideshow) pour photo à la manière de Flickr et j'ai finalement trouvé une solution assez simple et non complexe à mettre en oeuvre à l'aide de Prototype-UI et Scriptaculous, des librairies JavaScript Open source.
 
Alors, suivez le guide suivant et vous aussi vous pourrez ajouter de belle présentation à vos photos.

Étape 1: HTML code

Le code HTML est très simple. Vous n'avez qu'a insérer entre les balises <head> le code suivant qui insère les librairies JavaScript dans vos pages et le fichier css :   <script src="http://www.pckult.net/lib/prototype.js" type="text/javascript"></script>
<script src="http://www.pckult.net/lib/effects.js" type="text/javascript"></script>
<script src="http://www.pckult.net/lib/carousel.js" type="text/javascript"></script>
<link href="http://www.pckult.net/prototype-ui.css" rel ="stylesheet" type="text/css" />
Maintenant, entre vos balises <body>, il suffit d'insérer le code suivant :
<div id="horizontal_carousel">
  <div class="container">
   <ul>
   <li>... ... </li>
   <li>... ... </li>
       ...
   </ul>
 </div>
 <div class="buttons">
 <div class="previous_button"></div>
 <div class="next_button"></div>
 <br />
</div>
Vous devez insérer vos images entre les tags <li> afin que celle-ci soit dans la présentation.

Exemple :

<ul>
   <li><img src="http://www.pckult.net/img/img_1.png"></li>
   <li><img src="http://www.pckult.net/img/img_2.png"></li>
   <li><img src="http://www.pckult.net/img/img_3.png"></li>
   ....
</ul>
Si vous avez un serveur PHP, vous pouvez populer votre liste dynamiquement. Voici un exemple avec PHP :
  <?php
   // Connexion à la base de données
   include('dbconnection.php');
   $getImages_sql = 'SELECT * FROM IMAGES';
   $getImages mysql_query($getImages_sql);
?>
<ul>
   <?php
   while ($row = mysql_fetch_array($getImages {
   ?>
   <li><img src="http://www.pckult.net/ echo $row.['URL_image'] ?>"></li>
   <?php
   }
   ?>
</ul>
Vous devez ensuite insérer cette dernière ligne de code entre vos balises <body>. Ce code JavaScript utilise la librairie JavaScript Prototype-UI:
  <script type="text/javascript">
   // <![CDATA[
   function runTest() {
     hCarousel = new UI.Carousel("horizontal_carousel");
   }
   Event.observe(window, "load", runTest);
   // ]]>
</script>

Étape 2: CSS

Passons ensuite au look de votre présentation. Vous pouvez dans votre css modifier l'affichage de votre présentation. Voici un exemple de fichier CSS. Il est à noter que la propriété Width (Largeur) permet de faire afficher plus ou moins de photo dans votre présentation.
  #horizontal_carousel {
 width: 250px;
 height: 100px;
 padding:10px;
 background:#f6f6f6;
 border:solid 1px #e9e9e9;
}
#horizontal_carousel .container {
 width: 260px;
 overflow: hidden;
}
#horizontal_carousel .previous_button {
 float: left;
 width: 23px;
 height: 7px;
 background: url(img/but_prev.png) no-repeat;
 z-index: 100;
 cursor: pointer;
}
#horizontal_carousel .next_button {
 float: left;
 width: 23px;
 height: 7px;
 background: url(img/but_next.png) no-repeat;
 z-index: 100;
 cursor: pointer;