Créer un slideshow de photo à la manière de Flickr
Administrateur
Mar 03
|14:49
Mise à jour le Lundi, 03 Mars 2008 14:50
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="/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" />
<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>
<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>
<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>
// 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>
// <![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;
}
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;
}
