Magazine High tech

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.
  Slideshow Flickr-like
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;

Vous pourriez être intéressé par :

Retour à La Une de Logo Paperblog

Ces articles peuvent vous intéresser :

A propos de l’auteur


Dave Lizotte 57 partages Voir son profil
Voir son blog

l'auteur n'a pas encore renseigné son compte l'auteur n'a pas encore renseigné son compte l'auteur n'a pas encore renseigné son compte

Dossier Paperblog