IMPORTANT : Pour une mise en production de ce slideshow, je vous conseil d'utiliser notre plugin slidePulpe, plus simple et mieux optimisé.

Dans ce tutoriel, nous allons réaliser un diaporama photo simple et efficace, propulsé par jQuery. La navigation s'effectuera grâce à des flèches basiques, nous verrons ensuite comment ajouter des boutons afin d'accéder directement à une image voulue.

Les photos utilisées pour ce tutoriel proviennent du blog Supermachine (photos de Jaroonrat Vithoosuwan, Pitupong Chaowakul ).

Voir la démo | Télécharger le script du diaporama

Nous allons commencer par créer la structure HTML.

La première étape consiste à créer un conteneur pour notre diaporama :

<div id="global">
<h1>Galerie sans sucre</h1>
<div id="contenu">
<!-- Notre diaporama -->
</div>
</div>

Nous intégrons maintenant la structure du diaporama dans la balise « contenu » :
<div id="galerie">
<div class="sucre"><img src="images/photo_1.jpg" /><p>Apophis</p></div>
<div class="sucre"><img src="images/photo_2.jpg" /><p>Hamarkhis</p></div>
<div class="sucre"><img src="images/photo_3.jpg" /><p>Dedoum</p></div>
<div class="sucre"><img src="images/photo_4.jpg" /><p>Menhyt</p></div>
<div class="sucre"><img src="images/photo_5.jpg" /><p>Shetat</p></div>
</div>

Afin d'embellir notre diaporama, nous allons nous occuper de la feuille de style :

Le corps du document :
* { margin:0; padding:0; }
html { background-color:#000000; }
body { min-width:960px; }
#global {
position:relative;
top:80px;
width:920px;
margin:0 auto;
text-align:center;
}
h1 {
padding:12px;
font-family:sans-serif;
font-size:2em;
color:#FFF;
text-shadow:1px 1px 2px #000;
font-weight:normal;
}

Le diaporama :
#galerie {
width:920px;
overflow:hidden;
}
#contenu {
width:840px;
margin:0 auto;
text-align:center;
overflow:hidden;
}
div.sucre {
float:left;
width:820px;
margin:10px;
background-color:rgb(255,255,255);
border-radius:2px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
}
p {
padding:12px;
font-family:sans-serif;
font-size:1.8em;
color:#000;
text-shadow:1px 1px 2px #888;
margin:0 auto 0 auto;
}
img {
margin:10px 0 0 0;
}

Nous devrions donc avoir ceci sur notre navigateur :

images/uploads/screen_diapo_jquery.jpg

Il est important d'avoir un résultat correct à ce stade, car ce sera ce qui s'affichera sur les navigateurs sans JavaScript.

Nous allons donc maintenant nous attaquer au script de notre diaporama. Dans un premier temps, nous devons intégrer jQuery dans notre page et notre script que nous allons créer avant la fermeture de l'élément « body » dans le corps html.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="script.js"></script>

Attaquons nous maintenant à notre « script.js »

Nous commençons par une phase d'initialisation des variables nécessaires :


Il faut maintenant créer la fonction qui permet la navigation :


Mettons en forme les flèches de navigation grâce à notre feuille de style :

div.controle {
margin-top:-250px;
height:30px;
width:31px;
font-family:sans-serif;
font-size:1.5em;
color:#888;
cursor: pointer;
text-align:center;
background-color:rgb(255,255,255);
border-radius:2px;
-moz-border-radius:2px;
-webkit-border-radius:2px;
}
div.controle:hover {
color:#444;
}
#left {
float:left;
margin-right:9px;
}
#right {
float:right;
margin-left:9px;
}

Nous avons maintenant un diaporama avec une navigation simple, mais pour atteindre une photo directement, cela pose un problème, nous allons mettre en place une fonction permettant un accès direct à une image.


Un peu de mise en forme :

ul {
list-style:none;
}
li {
display:inline;
cursor: pointer;
margin-right:5px;
font-family:sans-serif;
font-size:2em;
color:#444444;
}
li:hover {
color:#FFFFFF;
}
.survol {
color:#FFFFFF;
}

Le diaporama est maintenant terminé, n'hésitez pas à nous faire part de vos impressions !

images/uploads/screen2_diapo_jquery.jpg