Dans ce nouveau tutoriel jQuery, je vais tenter de vous expliquer comment fonctionne un carrousel (une galerie d'images) et comment en faire un vous-même !
Fonctionnement d'un carrousel
Tout d'abord, il faut comprendre le mécanisme une telle galerie d'image. Pour cela, seule la définition d'un carrousel réel pourrait suffire : Boîtier de forme circulaire servant à projeter des diapositives
(cf. Mediadico). Dans ce tutoriel nous nous contenterons de créer un mécanisme qui se bloque vers la droite lorsque nous sommes positionnés au dernier item et se bloque vers la gauche lorsque nous sommes positionnés au premier.
En XHTML/CSS, nous allons créer une bande de diapositives placée en arrière-plan et elle sera en partie visible à travers un bloc aux dimensions d'une seule diapositive. Un petit dessin valant mieux qu'un long discours, voici une vue de profil et de face expliquant cette notion de partie visible
.
Dans cette vue de profil, seule la diapositive C est visible au travers du bloc.
Enfin, dans cette vue de face plus habituelle, seule la diapositive C est visible au travers du bloc. Les autres étant masquées par le premier-plan.
Montage XHTML/CSS de base
Il faut poser une structure XHTML sur laquelle on travaillera en jQuery. Pour ce tutoriel, j'ai donc opté pour une liste de d'item avec les balises <ul> et <li>.
<ul class="carrousel">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
</ul>
En CSS, nous allons donner un style de bande de diapositives à cette liste.
.carrousel {
margin:0;
padding:0;
height:75px;
}
.carrousel li {
float:left;
width:75px;
height:75px;
margin:0;
padding:0;
list-style:none;
color:#FFF;
font:3em/1.2 Georgia, "Times New Roman", Times, serif;
text-align:center;
background:#C00;
}
Et voilà le rendu :
A partir de ce moment, nous ne toucherons plus le code XHTML car nous le travaillerons en jQuery.
Mise en place du carrousel avec jQuery
Lorsque le javascript est activé sur votre navigateur, il va être possible de créer notre carrousel.
Création de la fenêtre de visualisation
Nous allons créer rapidement grâce à jQuery la fenêtre de visualisation. Pour ce faire, nous devons faire plusieurs choses :
- Créer un conteneur pour la bande de diapositives qui sera la fenêtre de visualisation
- Grâce à la fonction
wrap(), nous engloberons la liste d'une <div>.
- Déterminer la taille de la fenêtre de visualisation
- Nous prendrons comme référence les dimensions de la première diapositive.
// Execution de cette fonction lorsque le DOM sera entièrement chargé
$(document).ready(function() {
// Calcul préalables :
// Element de référence pour la zone de visualisation (ici le premier item)
Reference = $(".carrousel li:first-child");
// Ciblage de la bande de diapositives
$(".carrousel")
// Englobage de la liste par la zone de visualisation
.wrap('<div class="carrousel-conteneur"></div>')
// Ciblage de la zone de visualisation
$(".carrousel-conteneur")
// Application de la largeur d'une seule diapositive
.css("width", Reference.width() )
// Application de la hauteur d'une seule diapositive
.css("height", Reference.height() )
// Blocage des débordements
.css("overflow", "hidden");
});
Ce qui a pour effet de ne rendre que le premier item de la liste visible :
Forcer la bande de diapositive à l'horizontal
Le fait de forcer la taille du conteneur de la liste à pour effet de faire passer à la ligne chaque diapositive. Comme le montre cette capture avec Firebug :
Pour éviter cet effet indésirable, nous devons fixer la largeur de la bande de diapositive. Ainsi il faut :
- Connaître le nombre de diapositives
- Nous allons cibler tous les élément
<li> et resortir leur nombre grâce à la méthode length.
- Fixer la largeur de la bande de diapositives
- Il suffira de multiplier la largeur d'une seule diapositive par le nombre de diapositives.
// Execution de cette fonction lorsque le DOM sera entièrement chargé
$(document).ready(function() {
// Calcul préalables :
// Element de référence pour la zone de visualisation (ici le premier item)
Reference = $(".carrousel li:first-child");
// Nombre d'éléments de la liste
NbElement = $(".carrousel li").length;
// Ciblage de la bande de diapositives
$(".carrousel")
// Englobage de la liste par la zone de visualisation
.wrap('<div class="carrousel-conteneur"></div>')
// Application d'une largeur à la bande de diapositive afin de conserver une structrure horizontale
.css("width", (Reference.width() * NbElement) );
// Ciblage de la zone de visualisation
$(".carrousel-conteneur")
// Application de la largeur d'une seule diapositive
.width( Reference.width() )
// Application de la hauteur d'une seule diapositive
.height( Reference.height() )
// Blocage des débordements
.css("overflow", "hidden");
});
Ce qui donne :
Toujours avec Firebug, on voit bien maintenant que notre bande de diapositives est horizontale :
Création de la navigation
Maintenant que notre carrousel est en place, nous allons insérer les boutons de navigation permettant de changer de diapositive et instaurer des actions lors du clic sur ceux-ci.
Insertion des boutons
Nous allons insérer en XHTML (after()) après le conteneur ayant la classe CSS "carrousel-conteneur" une liste avec 2 liens en prenant soin de les identifier avec une class CSS particulière. Un lien pour la diapositive précédente, un autre pour la diapositive suivante.
// Execution de cette fonction lorsque le DOM sera entièrement chargé
$(document).ready(function() {
// Calcul préalables
// […]
// Ciblage de la bande de diapositives
// […]
// Ciblage de la zone de visualisation
$(".carrousel-conteneur")
// Application de la largeur d'une seule diapositive
.width( Reference.width() )
// Application de la hauteur d'une seule diapositive
.height( Reference.height() )
// Blocage des débordements
.css("overflow", "hidden")
// Insertion des boutons de navigation
.after(''
+ '<ul class="carrousel-pagination">'
+ ' <li class="carrousel-prev"><a href="#">Précédent</a></li>'
+ ' <li class="carrousel-next"><a href="#">Suivant</a></li>'
+ '</ul>'
+ '');
});
Ce qui donne :
Fonctionnement des boutons de navigation
Lors d'un clic sur le lien "précédent" ou "suivant", à l'aide de jQuery nous allons déplacer la bande de diaposives placée en arrière-plan.
Par exemple, si nous sommes sur la diapositive A et que nous cliquons sur "suivant", la bande de diapositive va se déplacer vers la gauche afin de montrer la diapositive B. De même, si nous sommes sur la diapositive E et que nous cliquons sur "précédent", la bande de diapositive va se déplacer vers la droite afin de montrer la diapositive D.
Mathématiquement, cela se traduit ainsi : si nous sommes sur la diapositive 0 (lettre A) et que nous cliquons sur "suivant", la bande de diapositive va se voir appliquer une marge gauche de -75px (la taille d'une seule diapositive) pour afficher la diapositive B. De même, si nous sommes sur la diapositive 4 (lettre E) et que nous cliquons sur "précédent", la bande de diapositive va voir sa marge gauche passer de -300px (la taille de 4 diapositives) à -225px (la taille de 3 diapositives) pour afficher la diapositive D.
Pour bien comprendre, si nous faisons un petit tableau récapitulatif :
| |
Calcul de la position |
Marge gauche du carrousel |
Illustration |
Lettre A
(Diapositive 0) |
- (Taille d'une diapo × Aucune diapositive) |
0 |
 |
Lettre B
(Diapositive 1) |
- (Taille d'une diapo × 1 diapositive) |
-75px |
 |
Lettre C
(Diapositive 2) |
- (Taille d'une diapo × 2 diapositives) |
-150px |
 |
Lettre D
(Diapositive 3) |
- (Taille d'une diapoe × 3 diapositives) |
-225px |
 |
Lettre E
(Diapositive 4) |
- (Taille d'une diapo × 4 diapositives) |
-300px |
 |
Actions des boutons de navigation
Afin de savoir sur quelle diapositive nous sommes lorsque nous utiliserons le carrousel, nous allons instaurer un compteur. Un compteur est une variable à laquelle nous ajouterons 1 si nous cliquons sur "suivant" et nous oterons 1 si nous cliquons sur "précédent". Elle nous servira à nous repérer pour afficher la bonne diapositive.
C'est parti :
$(document).ready(function() {
// Code précédent
// […]
// Actions de navigation
// Initialisation du compteur
Cpt = 0;
// Clic sur le lien "Suivant"
$(".carrousel-next a").click(function() {
// Ajout +1 au compteur (nous allons sur la diapositive suivante)
Cpt++;
// Mouvement du carrousel en arrière-plan
$(".carrousel").animate({
marginLeft : - (Reference.width() * Cpt)
});
// Blocage du lien
return false;
});
// Clic sur le lien "Précédent"
$(".carrousel-prev a").click(function() {
// Soustraction -1 au compteur (nous allons sur la diapositive précédente)
Cpt--;
// Mouvement du carrousel en arrière-plan
$(".carrousel").animate({
marginLeft : - (Reference.width() * Cpt)
});
// Blocage du lien
return false;
});
});
Voici notre carrousel fonctionnel :
Limitation du carrousel
Notre carrousel est effectivement fonctionnel mais si vous l'avez tripoté un peu, vous avez dû vous apercevoir que l'on peut continuer d'aller vers la gauche après la diapositive A et continuer d'aller vers la droite après la diapositive E. Pour terminer ce tutoriel, il va donc falloir empêcher l'animation vers la gauche après la diapositive A et vers la droite après la diapositive E.
Rajoutons donc des tests (if()) : autorisons le lien "précedent" lorsque notre compteur est supérieur à zéro et autorisons le lien "suivant" lorsque notre compteur est inférieur au nombre de diaposives moins 1 (-1 car le compteur compte à partir de 0 et non 1).
$(document).ready(function() {
// Code précédent
// […]
// Actions de navigation
// Initialisation du compteur
Cpt = 0;
// Clic sur le lien "Suivant"
$(".carrousel-next a").click(function() {
// Si le compteur est inférieur au nombre de diaposives moins 1
if(Cpt < (NbElement-1) ) {
// Ajout +1 au compteur (nous allons sur la diapositive suivante)
Cpt++;
// Mouvement du carrousel en arrière-plan
$(".carrousel").animate({
marginLeft : - (Reference.width() * Cpt)
});
} // fin du if
// Blocage du lien
return false;
});
// Action du lien "Précédent"
$(".carrousel-prev a").click(function() {
// Si le compteur est supérieur à zéro
if(Cpt > 0) {
// Soustraction -1 au compteur (nous allons sur la diapositive précédente)
Cpt--;
// Mouvement du carrousel en arrière-plan
$(".carrousel").animate({
marginLeft : - (Reference.width() * Cpt)
});
} // fin du if
// Blocage du lien
return false;
});
});
Voici donc notre carrousel finalisé !
Ce tutoriel de carrousel en jQuery n'est qu'un exemple parmi une multitude de possibilités de façon de faire. Mais j'espère tout de moins vous avoir fait comprendre le fonctionnement classique d'un tel mécanisme !
N'hésitez pas à dire si un point n'est pas assez clair !
]]>
Creative Suite® 4 Design Premium
Creative Suite 4 Master Collection
Photoshop CS4 Extended
Photoshop Elements 7
Illustrator® CS4
Dreamweaver® CS4
Flash® CS4 Professional
Premiere® Pro CS4
After Effects® CS4
InDesign® CS4
Photoshop® Lightroom® 2
