Tutoriel: Réaliser un diaporama simple avec JQuery
Publié par Gui dans Développement, jQuery, Tutoriels
Facile
jQuery, css
Il existe une nouvelle version du diaporama simple avec JQuery ! Cliquez ici pour accéder aux nouveautés!
JQuery est devenu rapidement un framework de développement javascript indispensable, très pratique que ce soit pour développer de simples fonctionnalités ou des sites complets.
Souvent, lors de la création d’un site internet, on rencontre les mêmes fonctionnalités de base (des rollover sur les images, un menu déroulant, un diaporama …), et pour chacun d’entre eux, il existe quasiment un plugin JQuery qui répond à ces attentes.
Il peut être également utile de développer un plugin pour une fonctionnalité simple mais à laquelle on se trouve souvent confronté et dont on veut maîtriser le fonctionnement.
Mon premier tutoriel s’articulera donc autour de la mise en place d’un plugin JQuery simple: un diaporama Photo.
Introduction
Nous allons donc réaliser un diaporama de photos. Le principe étant que les photos défilent les unes après les autres avec une transition par fondu enchaîné. Nous allons aussi ajouter des boutons de contrôle pour mettre en pause le diaporama, accéder à la photo suivante ou précédente.
Première étape: partie HTML
Avant tout, il convient d’inclure la librairie JQuery dans notre page de test. Vous pouvez la trouver ici : Librairie JQuery
Ensuite, nous allons écrire une page HTML simple avec une liste de photos.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr"> <head> <title>Diaporama Simple JQuery</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!-- Cascading Style Sheets --> <link href="page.css" rel="stylesheet" type="text/css" /> <link href="style.css" rel="stylesheet" type="text/css" /> <!-- Javascript --> <script type="text/javascript" src="js/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="js/jquery.diaporama.js"></script> <script type="text/javascript" src="js/script.js"></script> </head> <body> <h1>Diaporama Simple</h1> <ul class="diaporama"> <li><img src="img/galerie/image1.jpg" alt="Image 1" /></li> <li><img src="img/galerie/image2.jpg" alt="Image 2" /></li> <li><img src="img/galerie/image3.jpg" alt="Image 3" /></li> <li><img src="img/galerie/image4.jpg" alt="Image 4" /></li> <li><img src="img/galerie/image5.jpg" alt="Image 5" /></li> </ul> </body> </html>
Deuxième étape: partie CSS
Le principe de base du diaporama est de superposer les images pour ensuite les faire défiler. Nous allons donc créer une feuille de style avec les propriétés suivantes :
.diaporama{
position:relative;
width:512px; /* Largeur d'une photo */
height:288px /* Hauteur d'une photo */
}
.diaporama li{
list-style-type:none;
overflow:hidden;
position:absolute /* Les images seront positionnées toutes au même endroit */
}
.diaporama_controls{
width:512px;
margin:3px 0;
padding:5px;
clear:both;
overflow:hidden;
}
.diaporama_controls .btns{
float:right;
}
.diaporama_controls a{
font-weight:normal;
width:10px;
height:13px;
text-indent:-9999px;
display:inline-block;
margin:0 3px;
}
.diaporama_controls .prev{
background:url(img/fleches_diapo.png) no-repeat top right;
}
.diaporama_controls .next{
background:url(img/fleches_diapo.png) no-repeat top left;
}
.diaporama_controls .pause{
background:url(img/fleches_diapo.png) no-repeat bottom right;
}
.diaporama_controls .play{
background:url(img/fleches_diapo.png) no-repeat bottom left;
}
Je ne détaillerai pas le contenu de la feuille de style page.css, celle-ci n’est utilisée que pour la mise en page de l’index.html.
Voici le résultat que nous avons pour l’instant :
Troisième étape: partie JQuery
Nous allons avoir deux fichiers javascript :
- Notre fichier plugin « jquery.diaporama.js«
- Un fichier de script, pour exécuter le diaporama « script.js«
Instanciation du plugin Diaporama
La fonction Diaporama doit être appelée dans la page html, au chargement de la page, au moyen de la fonction JQuery $(document).ready()
Cet appel sera effectué depuis le fichier script.js :
$(document).ready(function(){
$(".diaporama").diaporama({
animationSpeed: "slow",
delay:2
});
});
On va éxécuter la fonction diaporama sur tous les éléments qui ont une classe « diaporama ».
Structure du plugin
(function($){ // 1
$.fn.diaporama = function(options) {
// 2 Appliquer le diaporama sur chacun des éléments ciblés
this.each(function(){
});
return this; // 3 Continuer le chainage JQuery
};
})(jQuery);
Voici la structure de base d’un plugin JQuery :
- On utilise function($) pour explicitement dire qu’on va utiliser l’alias « $ » dans notre fonction
- La fonction diaporama va être appelée sur un élément ou un ensemble d’éléments. Il convient donc d’éxécuter pour chacun des éléments rencontrés la fonction diaporama
- Le chaînage permet de continuer d’appliquer des fonctions à notre sélecteur, par exemple, $(« .diaporama »).diaporama().show.fadeOut() …
Paramètres
Nous allons utiliser différents paramètres pour notre diaporama :
- delay: le délai de balayage des images
- animationSpeed: la durée de l’effet de transition
- controls: affichage des boutons de contrôle
Cela va se traduire dans notre script par :
var defaults = {
delay: 3,
animationSpeed: "normal",
controls:true
};
var options = $.extend(defaults, options); // 1
- $.extend est une fonction JQuery qui permet de créer une variable options à partir, soit de la variable defaults, soit des paramètres spécifiés dans l’appel de la fonction $.fn.diaporama = function(options)
De ce fait, les paramètres non spécifiés dans l’appel du plugin seront ceux par défaut.
Initialisation
On va maintenant initialiser le diaporama:
- Vérifier que la liste contient au moins deux photos
- Initialiser nos variables
- Lancer la mécanique de rotation d’images
// On attribue à la variable obj, l'objet courant (le diaporama courant)
var obj = $(this);
// On teste si il y a plus d'une image, sinon le diaporama n'est pas nécessaire
if($(obj).find("li").length > 1){
// On va exécuter la fonction nextElt à chaque intervalle de temps
var inter = setInterval(function(){nextElt(options)}, (options.delay*1000));
// On enregistre le sens de rotation
var sens = "right";
// Par défaut, le diaporama n'est pas en pause
var pause = false;
// On cache tous les éléments de la liste
$(obj).find("li").hide();
// Le premier élément s'affiche progressivement et se voit attribuer la classe "active"
$(obj).find("li:first-child").addClass("active").fadeIn(options.animationSpeed);
}
Si le paramètre controls est défini à true, alors on ajoute les boutons de contrôle:
// On veut ajouter des boutons de contrôle
if(options.controls)
{
// On insère après la liste un <div> contenant les boutons "précédent", "suivant" et "pause"
$(obj).after("<div class='diaporama_controls'><div class='btns'><a href='#' class='prev'>Prec.</a> <a href='#' class='pause'>Pause</a> <a href='#' class='next'>Suiv.</a></div></div>");
// On définit l'action click pour le bouton "précédent"
// La méthode siblings() permet de trouver les éléments "frères" de l'élément courant
$(obj).siblings().find(".prev").click(function(){
// On supprime l'intervalle automatique de transition d'image
clearInterval(inter);
// On appelle la fonction qui affiche l'image précédente
prevElt(options);
// Si le diaporama n'est pas sur pause, on relance l'affichage automatique
if(!pause)
inter = setInterval(function(){prevElt(options)}, (options.delay*1000));
// On définit le sens à gauche
sens = "left";
});
// On applique la même méthode ou presque au bouton "suivant" (dans l'autre sens)
$(obj).siblings().find(".next").click(function(){
clearInterval(inter);
nextElt(options);
if(!pause)
inter = setInterval(function(){nextElt(options)}, (options.delay*1000));
sens = "right";
});
// Si on appuie sur "pause", on définit deux actions
$(obj).siblings().find(".pause").toggle(
// On change l'image de fond du bouton via la classe "play"
function(){
$(this).removeClass("pause").addClass("play");
// On supprime l'intervalle
clearInterval(inter);
// On positionne le booléen à true
pause = true;
},
function(){
// On remet l'image originale
$(this).removeClass("play").addClass("pause");
// On relance le diaporama dans le sens où il était
inter = setInterval(function(){ (sens == "right")?nextElt(options):prevElt(options)}, (options.delay*1000));
pause = false;
}
);
}
Ensuite, nous allons développer la fonction qui permet de passer à l’image suivante:
function nextElt(options)
{
// On cache de manière progressive l'image active
$(obj).find("li.active").fadeOut(options.animationSpeed);
// Si l'image active courante n'est pas la dernière image de la liste
if(!$(obj).find("li.active").is(":last-child"))
{
// Alors on cherche l'image suivante (".next()"), on lui ajoute la class "active",
// et on retire cette classe à l'image précedente (l'ancienne image active)
$(obj).find("li.active").next().addClass("active").prev().removeClass("active");
// On affiche la nouvelle image active progressivement
$(obj).find("li.active").fadeIn(options.animationSpeed);
}
// L'image est la dernière de la liste
else
{
// On fait la même chose mais en prenant la première image de la liste via le sélecteur "first-child"
$(obj).find("li:first-child").addClass("active").fadeIn(options.animationSpeed);
$(obj).find("li:last-child").removeClass("active");
}
}
Script final
Et voilà, nous avons à présent tous les éléments dont nous avons besoin pour que le diaporama fonctionne.
Voici le script final diaporama.js :
(function($){
$.fn.diaporama = function(options) {
var defaults = {
delay: 3,
animationSpeed: "normal",
controls:true
};
var options = $.extend(defaults, options);
this.each(function(){
var obj = $(this);
if($(obj).find("li").length > 1){
var inter = setInterval(function(){nextElt(options)}, (options.delay*1000));
var sens = "right";
var pause = false;
$(obj).find("li").hide();
$(obj).find("li:first-child").addClass("active").fadeIn(options.animationSpeed);
// Controls
if(options.controls)
{
$(obj).after("<div class='diaporama_controls'><div class='btns'><a href='#' class='prev'>Prec.</a> <a href='#' class='pause'>Pause</a> <a href='#' class='next'>Suiv.</a></div></div>");
$(obj).siblings().find(".prev").click(function(){
clearInterval(inter);
prevElt(options);
if(!pause)
inter = setInterval(function(){prevElt(options)}, (options.delay*1000));
sens = "left";
});
$(obj).siblings().find(".next").click(function(){
clearInterval(inter);
nextElt(options);
if(!pause)
inter = setInterval(function(){nextElt(options)}, (options.delay*1000));
sens = "right";
});
$(obj).siblings().find(".pause").toggle(
function(){
$(this).removeClass("pause").addClass("play");
clearInterval(inter);
pause = true;
},
function(){
$(this).removeClass("play").addClass("pause");
inter = setInterval(function(){ (sens == "right")?nextElt(options):prevElt(options)}, (options.delay*1000));
pause = false;
}
);
}
// Affiche l'élément suivant
function nextElt(options)
{
$(obj).find("li.active").fadeOut(options.animationSpeed);
if(!$(obj).find("li.active").is(":last-child"))
{
$(obj).find("li.active").next().addClass("active").prev().removeClass("active");
$(obj).find("li.active").fadeIn(options.animationSpeed);
}
else
{
$(obj).find("li:first-child").addClass("active").fadeIn(options.animationSpeed);
$(obj).find("li:last-child").removeClass("active");
}
}
// Affiche l'élément précédent
function prevElt(options)
{
$(obj).find("li.active").fadeOut(options.animationSpeed);
if(!$(obj).find("li.active").is(":first-child"))
{
$(obj).find("li.active").prev().addClass("active").next().removeClass("active");
$(obj).find("li.active").fadeIn(options.animationSpeed);
}
else
{
$(obj).find("li:last-child").addClass("active").fadeIn(options.animationSpeed);
$(obj).find("li:first-child").removeClass("active");
}
}
}
});
return this;
};
})(jQuery);
Téléchargements et Démo
La démo est disponible ici.
Les fichiers sources : télécharger les fichiers sources de l’example.
Ces articles peuvent aussi vous intéresser :
119 commentaires
Laisser une réponse
Bonjour,
Un excellent vrai tutoriel ! Merci.
J’ai tenté d’attribuer une valeur en millisecondes à animationSpeed…
La modification n’est pas prise en compte, le fade reste inchangé.
Je précise (mais le faut-il) que je suis débutant en js.
Encore merci.
Salut,
un grand merci, très clair comme explication 🙂
& thanks pour l’exemple …
@+
Bravo pour ce tuto d’une clarté rare, je suis débutant en JS. Est-il possible de se base sur cet exemple, en changeant simplement le mode de passage d’une image à une autre en utilisant JQuery ?
En définitive, j’aimerais voir glisser les images horizontalement lorsqu’on clique sur le bouton « suivant » ou « précédent ».
Merci pour votre réponse !
Il n’est pas possible pour le moment de changer le mode de transition. Il n’y a que le mode « fadeIn ». Il faudra revenir pour la prochaine version !
Merci pour votre réponse rapide. Entre-temps, j’ai trouvé la fonction « animate » qui correspond à mon attente.
Bravo encore et continuez ces beaux exemples (le dernier diapo est très beau)
En fait, je vais encore vous embêter un peu car je ne comprends pas certains points du script (pour l’adapter à ma façon) :
– qu’est ce que « li » ?
– où et comment est définie la classe « active » ?
D’avance, merci beaucoup !
Pour le « li », je viens de comprendre qu’il s’agissait des points de la liste !
extra, 100 MERCIS ! petite question toutesfois, j’aimerais ralentir la transition entre les images, mais j’ai beau modifier le parametre ANIMATIONSPEED .. rien n’y fait ! j’ai mis « slow » .. ou encore 1 …. ou 200000 … rien ne change. comment RALENTIR la transition ?
merci
éh ben j’ai trouvé ! désolé … il y a 2 fichiers .js ou apparaissent le parametre animationspeed et je le modifiais dans le mauvais fichier … mais bon, dans ce cas, pourquoi l’initialiser dans les 2 ?
je suis vraiment novice ;o)
Les deux fichiers ont une vocation différente. Le fichier jquery.diaporama.js est le script général, que l’on ne doit pas toucher.
Le script script.js sert à initialiser le diaporama, en lui donnant les paramètres souhaités (qui ont une valeur par défaut dans jquery.diaporama.js).
Par ailleurs, je t’invite à découvrir la nouvelle version du diaporama.
salut
un grand merci pour ce tuto qui est trés interssant .
moi la diapo ca marche mais je n’arrive pas à intégrer les fléches (précedant suivant et la pause),sinn le plugin jquery doit être dans un dossier a part ou bien avec le dossier de styles ?
a part ca est ce possible d’interger la diapo dans une (div ) entete de page .
merci d’avance 🙂
Bonjour,
tuto très util en effet, merci!
je voudrais bloquer le bouton precedent quand il n’y a pas d’images , (c’est à dire quand on est à la première image) et bloquer suivant aussi quand on est à la derniere.
je ne sais pas si c’était prévu?
merci!
Non ce n’était pas prévu à l’origine, mais c’est une fonction intéressante à ajouter, la possibilité de « looper » ou non sur toutes les images.
A voir pour la prochaine mise à jour 😉
super travail ! Merci beaucoup
Bonjour
Je suis tout tout tout débutant et je voudrait utiliser le slideshow pour mon site.
J’ai téléchargé le slide show mais je ne sais pas comment l’utiliser.
Pouvez-vous m’indiquer la marche à suivre (bien détailler) lol.
J’ai bidouiller mon site avec Komposer. Voudrais savoir si je dois installer jquery.
bref faut tout m’expliquer, désolé. merci d’avance.
Je galère depuis un moment.
Bonjour Haddocks,
Le tutoriel est très bien détaillé, étant moi-même débutant en javascript j’ai réussi à le faire fonctionner.
Je pense qu’il faut tout de même connaître un minimum les langages de programmation (ce qu’est une variable, une boucle etc.) si tu veux entrer un peu dans le code.
Tu peux aller sur le « site du zéro », excellent point de départ, ou tout bêtement taper « base programmation php » ou « javascript » sur Google, il y a énormément de tutoriels pour t’aider.
Il faut commencer par le commencement, n’est pas programmeur qui veut (je ne le suis pas du tout, ça prouve que tout le monde peut y arriver !…mais c’est un métier !).
A ta dispo quand même si tu veux quelques conseils.
Bonsoir
merci bien de vouloir m’aider, me sent un peu moins seul. c un peu un autre monde pour moi tout ça.
Y a pas moyen de faire un copier coller du code dans le code source de ma page d’accueil via Kompozer ? ce serait vachement plus simple lol.
mon site est « photoreporterre.com » se serait cool si tu pouvais afficher le code source de ma page, intégrer le code qui va bien, puis faire un copier coller de tout ça sur le forum que j’intégrerais après. Ce serait génial.
je me débrouillerais après pour placer le diapo ou je voudrais et intégrer mes photos.
est ce faisable ?
Bonsoir,
Très bon tutoriel.
Est-il possible d’ajouter une fonction de type « photo cliquable » envoyant vers une page web différente selon la photo ?
D’avance merci pour votre réponse ?
Bonjour Guillaume
Je viens d’installer ton diaporama et je suis ravie : c’est exactement ce que je cherchais.
Seul petit souci : sous EI7 les boutons de navigation n’apparaissent pas.
J’ai essayer de déplacer diaporama-controls mais rien n’y fait.
Aurais-tu une astuce à me donner.
Merci d’avance
bonjour et merci pour ce script tres sympa qui a l’air de bien fonctionner sur mon site avec une bdd de + de 1000 images et du php pour gerer la recherche d’image. (pour l’instant en test uniquement et avec la version 1)
une petite question pour un novice de jquery : si je souhaite non pas 1 mais plusieurs images à l’affichage ? et si je souhaite d’autres effets , genre défilé d’image , ce script convient-il ?
y’a t il un catalogue pour les nuls ?
moi qui ne veut pas de navigation, j’ai supprimé les fonctions de controle en css et dans le .js pour simplifié au max mais je voudrais bien varier les effets.
y’a surement un tuto quelque part…je dois pas être encore réveillé !
rectification, ça marche super bien sur firefox et chrome mais je bug sur IE
Bonjour,
Il y a un problème lorsqu’on reste assez longtemps sur une page (bien sûr le diaporama). Le diaporama s’accélère !
J’ai rencontré le même problème lorsque je restais un certain temps sur un autre onglet (sous firefox) et que je revenais sur ma page.
Cela vient d’une limitation des interval sur les onglets inactifs qui fais bugger le script lorsque l’onglet redeviens actif. La solution est de bloquer le script lorsque l’on quitte l’onglet et de le reactiver lorsqu’on y revient.
J’ai pas mal modifier le code donc je ne sais si la solution est rigoureuse mais le principe fonctionne : (code à rajouter au script)
window.onblur = function(){
clearInterval(inter);
inter= » »; //permet de savoir si l’interval est fermé (bidouille)
}
window.onfocus = function(){
if(inter= » »)inter =setInterval(function(){nextElt(options)}, (options.delay*1000));
}
Bonjour
J’ai une petite question concernant ce diaporama. J’aimerai y insérer des photos verticales. Pour l’instant, elles sont alignées à gauche du . J’aimerai bien qu’elles soient centrées. Comment peut on faire ?
Je dois avouer que j’ai les bases en html, mais que je découvre juste le javascript. Après quelques essais dans le css, je n’ai toujours pas réussi.
D’avance merci !!
Problème résolu en quelques minutes. Il fallait que je rajoute un largeur à l’élément « .diaporama li » pour que les marges auto puissent être calculées.
Quoiqu’il en soit, merci beaucoup pour ce tutoriel vraiment bien fait. Je vais essayer de jeter un oeil du coté du javascript, ca s’annonce très très puissant !
test
Je me suis permis une petite modification concernant l’animation pour la rendre plus belle au niveau de la transition https://gist.github.com/1280843
Super ! N’hésite pas à regarder du côté des nouveautés dans la version 3 http://wp.me/pWdn8-l5 😉
Bravo pour ce tutoriel.
Est-il possible d’écrire du texte par dessus le diaporama (sans passer la souris par dessus)?
Lorsque j’en met et que je règle les z-index le texte passe quand même sous les images.
Je ne comprends pas exactement ce que tu veux faire. S’il s’agit d’afficher les légendes des images en permanence, tu peux utiliser l’option « rollover: false » (dans la dernière version http://wp.me/pWdn8-l5).
Bonjour à tous,
Je voulais savoir si il était possible de rajouter un contrôle du diaporama avec les flèches droites et gauches du clavier.
Si vous avez des pistes, je suis vraiment intéressé !
Je continue à chercher de mon coté, et vous tiens au courant si je trouve la solution 😉