Tutoriaux
Écrit par Administrator    Lundi, 03 Mars 2008 09:49    PDF Imprimer Envoyer
Créer un slideshow de photo à la manière de Flickr
Tutoriaux - HTML / DHTML / XHTML
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="/lib/prototype.js" type="text/javascript"></script>
<script src="/lib/effects.js" type="text/javascript"></script>
<script src="/lib/carousel.js" type="text/javascript"></script>

<link href="/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="/img/img_1.png"></li>
   <li><img src="/img/img_2.png"></li>
   <li><img src="/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="/ 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;
} 

Rétrolien(0)

Adresse URI pour un rétrolien sur cet article

Commentaires (2)

Flux RSS pour les commentaires
...
0
On récupère où le fichier caroussel.js car dans la librairie scriptacalous il n'y a pas de caroussel.js mais slide.js et ca marche pas !
Yannick , novembre 11, 2008

Ecrivez un commentaire

Réduire l'éditeur | Agrandir l'éditeur

busy
Mis à jour ( Lundi, 03 Mars 2008 09:50 )
 

Derniers ajout

Les plus lus

Meilleurprix.ca

Annonces classées

QuébecAnnonce.com