Diaporama simple avec JQuery, nouvelle version: jDiaporama !
Facile
jQuery, css
téléchargez dès maintenant la toute dernière version de jDiaporama avec plein de nouveautés !
Vous avez été nombreux à commenter le tutoriel « Comment réaliser un diaporama simple avec JQuery« , alors le voici maintenant en version 2 !
J’ai essayé d’ajouter dans cette nouvelle version les différents manquements que vous souligniez dans le précédent tutoriel.
Voici donc les nouveautés de ce nouveau diaporama JQuery:
- Nouvel aspect graphique
- Contrôle du diaporama grâce aux touches directionnelles du clavier
- Défilement automatique ou non
- Gestion de la direction du diaporama (de gauche à droite ou inversement)
- Pause par défaut possible
- Arrêt du diaporama après un nombre défini de boucles
- Affichage du titre
- Affichage de la légende
- Affichage d’un compteur (image actuelle sur nombre d’images)
- Possibilité d’accéder à une image directement en cliquant sur les boutons ronds
- Ajustement automatique en fonction de la taille des images du diaporama
- Compatibilité sur tous les navigateurs
Préambule
Je ne vais pas revenir en détails sur la création de la partie HTML (celle-ci est n’a pas changé, c’est toujours aussi simple!), ni sur le CSS, mais me concentrer à vous expliquer le fonctionnement des nouveautés de cette version.
Si vous avez manqué le début, notamment sur la création d’un plugin pour JQuery, je vous invite à suivre le tutoriel original: Tutoriel: Réaliser un diaporama simple avec JQuery.
Déclaration des nouvelles options
var defaults = { auto: true, // Le diaporama est en mode automatique delay: 3, // La durée d'affichage est de 3 secondes animationSpeed: "normal", // La durée de transition est normale controls: true, // Les boutons de contrôle sont affichés par défaut keyboard: true, // La navigation au clavier est activée infos: true, // Les informations (légende, titre) sont affichées currentimage: true, // Le compteur d'image est affiché paused: false, // Le diaporama démarre automatiquement boucles: 0, // 0 = Illimité, le diapo ne s'arrêtera jamais sens: "right" // Le sens du défilement est vers la droite par défaut onrollover: true // Les infos ne s'affichent qu'au survol de la souris };
Initialisation & variables
Nous allons voir ici dans un premier temps, comment initialiser notre script, en définissant quelques variables et en effectuant quelques actions.
Mais comme dit le proverbe, un joli code vaut mieux qu’un long discours !
// la variable diapo est un raccourci pour le diaporama courant var diapo = $(this); // Variable utilisé pour détecter la présence de la souris sur le diaporama var mouseover = false; // Orientation du défilement var sens = options.sens; var pause = false; var width = 0; var height = 0; // Image par défaut (position 0) var current_slide = 0; // On encapsule notre liste (ul) dans un div avec une classe diapo.wrap("<div class='jDiaporama'></div>"); var inter = ""; // Variable pour l'interval de temps // Si le mode est défini sur "auto" et qu'il démarre automatiquement if(options.auto && !options.paused) // On lance le diaporama (défilement) inter = setInterval(function(){displayDiaporama(options)}, (options.delay*1000)); // On cache les autres images pour n'afficher que la première $("li", diapo).hide(); // A noter une différence, maintenant on appelle une fonction init() * // à la fin du fondu sur la première image. $("li:first-child", diapo).addClass("active").fadeIn(options.animationSpeed, init); // Pour chaque élément $("li", diapo).each(function(){ elt = $(this); // On calcule la position de l'image i = parseInt($("li", diapo).index($(this))+1); // On lui ajoute un ID avec la position $(this).attr("id", "jDiaporama_image_"+i); // Affichage de la légende si renseignée et activée if(options.infos) { // Y-a-t-il une description ? balise title var is_desc = ($("img", elt).attr("title") != ""); // Y-a-t-il un titre? balise alt var is_title = ($("img", elt).attr("alt") != ""); // On affiche ensuite ou non le titre et la description de l'image if(is_desc) elt.append("<p class='desc'>"+$("img", elt).attr("title")+"</p>"); if(is_title) elt.append("<p class='title'>"+$("img", elt).attr("alt")+"</p>"); // On affiche selon le paramètre choisi, le compteur d'image ou non if(options.currentimage) // On récupère ici la position de l'image courante (méthode index()) // qu'on incrémente car la première position est 0. // Et on la compare au nombre d'images total // (nombre d'enfants (li) du diaporama) elt.append("<p class='count'>"+parseInt($("li", diapo).index(elt)+1)+"/"+diapo.children().length+"</p>"); } })
* Le script est maintenant initialisé par une fonction.
function init() { // On récupère la taille de la première image du diaporama width = $("li:first-child img", diapo).width(); height = $("li:first-child img", diapo).height(); // Sa hauteur // On ajuste le diaporama à la bonne taille // Ici la liste ul diapo.width(width); diapo.height(height); // Ici son parent .jDiaporama diapo.parent().width(width); diapo.parent().height(height); // Si les contrôles sont activés, on affiche les boutons ronds if(options.controls) diapo.siblings(".jDiaporama_status").show(); // Si le diaporama est auto, mais en pause au début, // On lance l'évènement click sur le bouton "pause" if(options.auto && options.paused) $(".pause", diapo.siblings()).trigger("click"); // On rend actif le premier bouton rond de la status bar $("#jDiaporama_bullet_"+(parseInt($("li", diapo).index($("li:first-child", diapo)))+1), diapo.siblings()).addClass("active"); }
A ce stade là, notre script est initialisé.
Il nous reste maintenant à définir :
- les actions utilisateurs pour les rollovers et l’affichage des informations
- les commandes clavier
- les différents contrôles du diaporama (suivant, précedent, pause …)
- la fonction de rotation d’image
- la fonction de rotation automatique
Informations & Rollovers
Par défaut, les informations ne s’affichent qu’au survol de la souris sur une image. On peut changer ce paramètre dans les options.
Il convient alors de détecter quand la souris est sur l’image courante. Pour cela nous utilisons les méthode JQuery mouseenter et mouseleave pour respectivement « Entrée de la souris dans la zone de l’image » et « sortie« .
Evenements de la souris
diapo.parent().mouseenter(function(){ // On indique que la souris est bien au dessus de l'image mouseover = true; // On appelle la méthode qui affiche les infos // pour l'image courante displayInfos($("li.active", diapo), "show"); // Si les contrôles sont activés, on affiche les boutons (flèches, pause) if(options.controls) diapo.siblings(".jDiaporama_controls").fadeIn(); }).mouseleave(function(){ // La souris n'est plus au dessus de l'image mouseover = false; // On cache les infos displayInfos($("li.active", diapo), "hide"); // Et les boutons if(options.controls) diapo.siblings(".jDiaporama_controls").hide(); });
Grâce à ces deux méthodes, nous pouvons parfaitement gérer l’affichage des informations et des contrôles en fonction des évènements souris.
Méthode d’affichage
function displayInfos(elt, display) { // Variables pour tester la présence des balises "title" et "alt" // Pour respectivement la description et le titre var is_desc = ($("img", elt).attr("title") != ""); var is_title = ($("img", elt).attr("alt") != ""); if(is_desc) if(display == "show") $(".desc", elt).slideDown("fast"); else $(".desc", elt).slideUp("fast"); if(is_title) if(display == "show") $(".title", elt).slideDown("fast"); else $(".title", elt).slideUp("fast"); if(options.currentimage) if(display == "show") $(".count", elt).slideDown("fast"); else $(".count", elt).slideUp("fast"); }
Cette fonction s’occupe simplement de vérifier la présence des bonnes balises, pour n’afficher les informations que lorsqu’elles sont présentes. Ainsi on teste les attributs « title » et « alt » pour lancer l’animation d’affichage.
Le paramètre display est utilisé pour savoir s’il faut afficher ou cacher les informations.
Enfin, de la même manière, on n’affiche le compteur d’images que si celui-ci est activé dans les paramètres.
Commandes clavier
Nous utilisons ici une autre méthode JQuery: la fonction keydown qui permet de détecter la pression d’une touche du clavier.
Il suffit ensuite de repérer le code de la touche correspondant à la flèche gauche (37) et à la flèche droite (39). Après, nous allons réutiliser le fonctionnement du clic sur les boutons suivant et précédent (voir plus bas) pour passer à l’image suivante ou précédente (évitant ainsi de réécrire les actions).
// Si la navigation au clavier est activée if(options.keyboard) $(document).keydown(function(event) { switch(event.keyCode){ case 37 : // Flèche gauche // On appelle la fonction prev() prev(); break; case 39 : // Flèche droite // On appelle la fonction next() next(); break; } });
Boutons de contrôle
Nous allons détailler ici les différentes actions effectuées par les boutons de contrôle du diaporama.
Il y a pas mal de code alors accrochez-vous !
Il y a quatre étapes dans cette portion de code :
- Définition de la « status bar« , les boutons ronds qui permettent de suivre le défilement du diaporama.
- L’action du bouton précédent
- L’action du bouton suivant
- L’action du bouton lecture/pause
Status bar
// On ajoute le <div> qui contient les boutons ronds // juste après la liste d'images diapo.after("<div class='jDiaporama_status'></div>"); // Pour chaque image du diaporama $("li", diapo).each(function(){ // On calcule la position de l'image i = parseInt($("li", diapo).index($(this))+1); // On ajoute dans le <div> un lien vers cette même image $(".jDiaporama_status", diapo.parent()).append("<a id='jDiaporama_bullet_"+i+"' href='#'>Image "+i+"</a>"); }) // On calcule la taille que fait le <div> final avec les liens // dedans pour pouvoir le placer de manière absolue // centré en dessous du diaporama. $(".jDiaporama_status", diapo.parent()).css("margin-left", -($(".jDiaporama_status", diapo.parent()).width()/2)); // On définit l'action du clic sur un lien de la status bar $(".jDiaporama_status a", diapo.parent()).click(function(){ // on appelle la méthode de rotation d'image avec // comme paramètre le lien courant nextImage(options, $(this)); return false; })
Ajout des boutons de contrôle
On ajoute les boutons de contrôle après le diaporama (<ul>). A noter qu’on n’ajoute le bouton play/pause uniquement si le mode auto est activé).
// Ajout du <div> .jDiaporama_controls diapo.after("<div class='jDiaporama_controls'><a href='#' class='prev'>Prec.</a> " + ((options.auto)?"<a href='#' class='pause'>Pause</a>":"") + " <a href='#' class='next'>Suiv.</a></div>");
Action du bouton précédent
$(".prev", diapo.siblings()).click(function(){ prev(); // On annule l'action originelle (#) du lien return false; }); function prev() { // Si l'image courante n'est pas la première if(!$("li.active", diapo).is(":first-child")) // l'élément à afficher est l'image précédente elt = $("li.active", diapo).prev(); else // Sinon c'est la dernière elt = $("li:last-child", diapo); // On appelle la méthode de rotation avec l'image à afficher nextImage(options, elt); // On définit le sens de défilement sens = "left"; }
Action du bouton suivant
La seule différence avec le bouton précédent est le sens de rotation.
$(".next", diapo.siblings()).click(function(){ next(); // On annule l'action originelle (#) du lien return false; }); function next() { // Si l'image courante n'est pas la dernière if(!$("li.active", diapo).is(":last-child")) // l'élément à afficher est l'image suivante elt = $("li.active", diapo).next(); else // Sinon c'est la première elt = $("li:first-child", diapo); nextImage(options, elt); sens = "right"; }
Action du bouton lecture/pause
$(".pause", diapo.siblings()).click(function(){ // Si le diaporama est déjà en pause (a la classe "pause") if($(this).hasClass("pause")) { // On enlève cette classe et on met la classe "play" $(this).removeClass("pause").addClass("play"); // On arrête le défilement automatique du diaporama clearInterval(inter); // On définit une variable globale "pause" à true pause = true; } // Sinon else { // On remet la classe "pause" $(this).removeClass("play").addClass("pause"); // On relance le défilement automatique inter = setInterval(function(){displayDiaporama(options)}, (options.delay*1000)); pause = false; } return false; }); }
Fonction de rotation d’image
C’est ici le plus gros du système. La méthode a un peu changé par rapport au précédent tutoriel.
En effet, avant cette fonction ne s’occupait uniquement que d’afficher l’image suivante ou précédente selon le sens de rotation. Maintenant elle affiche une image définie (passée par paramètre) pour que l’on puisse afficher l’image souhaitée grâce à la « status bar ». C’est donc les boutons de contrôle qui définissent qu’il faut afficher l’image suivante ou précédente (comme vu précédemment).
// Le paramètre elt correspond à l'élément que l'on veut afficher // Soit l'image suivante au clic sur les boutons suivant/précédent // Soit le lien de la status bar function nextImage(options, elt) { // On stoppe le défilement automatique clearInterval(inter); // On cache l'image active et on lui retire sa classe $("li.active", diapo).fadeOut(options.animationSpeed).removeClass("active"); // On fait de même pour les liens de la status bar $(".jDiaporama_status a", diapo.parent()).removeClass("active"); // On récupère l'identifiant de l'élément (image ou lien status bar) id = elt.attr("id").split("_")[2]; // On rend actif et on affiche l'image demandée $("li#jDiaporama_image_"+id, diapo).addClass("active").fadeIn(options.animationSpeed); // On ajoute la classe actif au bon bouton rond de la status bar $("#jDiaporama_bullet_"+id, diapo.siblings()).addClass("active"); // Si les infos sont activées, le rollover aussi et qu'on est déjà sur le diaporama // au moment où on change d'image, alors on affiche les infos if(options.infos && mouseover && options.onrollover) displayInfos($("li.active", diapo), "show"); // Sinon on les cache else if(!mouseover && options.onrollover) displayInfos($("li.active", diapo), "hide"); // Si le diapo est en mode auto et n'est pas en pause if(!pause && options.auto) { // Si l'on est pas arrivé au bout du compteur de boucle ou que celui est ci est en mode infini (0) if(options.boucles == 0 || (options.boucles > 0 && (diapo.data("current_slide")/diapo.children().length) < options.boucles )) // On relance le défilement automatique inter = setInterval(function(){displayDiaporama(options)}, (options.delay*1000)); else // Sinon on est arrivé à la fin et on enlève le bouton lecture/pause $(".pause", diapo.siblings()).remove(); } }
Fonction de défilement automatique
Voici la fonction qui est appelée à intervalle régulier et qui s’occupe de faire défiler les images automatiquement.
On utilise dans cette méthode, une autre fonction JQuery bien pratique, la fonction data, qui permet d’associer des variables à un objet JQuery. En l’occurence, nous allons nous en servir pour stocker la variable current_slide dans l’objet diapo (notre diaporama).
function displayDiaporama(options) { // On incrémente le nombre d'images déjà affichées current_slide++; // On met à jour la variable pour le diaporama courant diapo.data("current_slide", current_slide); // Selon le sens de rotation, nous appelons la fonction // suivante ou précédente if(sens == "right") next(); else prev(); }
Conclusion
Voilà ! Le script de la nouvelle version du diaporama simple avec JQuery est maintenant terminée !
Informations & téléchargements
Le script fonctionne parfaitement sur tous les navigateurs : IE (6,7 et 8), Firefox, Chrome et Safari.
A noter que l’utilisation de png transparent fait quelque peu ralentir le script sur IE7 seulement et que sur IE 6 des images au format gif ont été utilisées pour remplacer les PNG.
La démo est disponible ici.
Les fichiers sources : télécharger les fichiers sources de l’example.
Le projet jDiaporama sur jQuery.com: http://plugins.jquery.com/project/jDiaporama
172 commentaires

Beau travail. Une question à six sous toutefois. Comment centrer l’affaire? Car en le centrant par html c’est pas très jojo. Merci 😉
Est-il possible de faire défiler les images de façon aléatoire ?
Promis dans la prochaine version 😉
Salut,
Pourquoi ce ne serait pas Jojo de caller en html ? tu peux le faire de façon propre ^^
Sinon, petit bug au niveau du delais ! J’ai beau changer la variable de delay , ça reste un defilement de 3 secondes…
@Bensti, je ne comprends pas trop ta question, tu peux très bien centrer ton diaporama où tu veux en CSS ou en HTML, après ça dépend de ton code ! 😉
@Rafa: Je ne vois pas de problème si je paramètre la variable delay à 10 (delay: 10), cela fonctionne très bien ! Une faute de frappe ? Tiens moi au courant 😉
Bwo, je changeais le Delay dans les fichiers jquery.diaporama et beta, pis la j’ai ouvert le fichier script.js
-_-
=)
Tout marche nickel eheh, mon cerveau fond …
et encore merci pour ce chouette slider 🙂
Bonjour,
Bravo Guillaume et merci.
2 questions toutefois :
1 – le calcul des dimensions est ok, les infos sont bien à leur place mais les boutons prev, pause, next sont décalés à gauche. Vérifié que des noms d’index ou de classe ne soient pas en conflit et tenté quelques modifs CSS sans succès.
2 – avec une seule image, les éléments qui suivent passent sous le diaporama. Là aussi tenté de jouer sur les clear, position, display de ces éléments sans résultat.
Une solution ?
@Rolland: Merci et pour répondre à tes questions:
1) Peux-tu m’indiquer quel navigateur tu utilises, quelle version, voire une page d’exemple, car je ne constate pas de problème de mon côté.
2) Le plugin diaporama est conçu pour afficher un diaporama d’images, ce qui implique qu’il y ait plus d’une image, le script ne s’exécute pas s’il n’y a qu’une image.
J’attends de tes nouvelles 😉
Guillaume,
Congratulations for your nice work. I’m from Brazil and I’m trying to adapt Diaporama in my website, but I have problems with the status bar when I use the Google Chrome. Can you check it please?
Thanks.
Thank you Breno.
I don’t see any problem with Google Chrome and the status bar. Check out the demo on Chrome.
But show me your own page, if you want, and I will try to figure it out.
impec ce diaporama !
une question : comment faire défiler les imgages de manière aléatoires (random) ?
merci d’avance
je souhaiterais que les boutons suivant et précédent soit toujours visible sur l’image et non en rollover. Est-ce possible ? merci beaucoup !
@irokoak
Désolé, mais il n’y a pas de mode aléatoire, je ne l’ai pas conçu, cela dit c’est une bonne idée pour la prochaine révision! Je note 😉
@perrine
Il n’est dans l’état pas possible d’afficher les flèches en permanence. Cela dit, avec quelques connaissances, tu peux aisément modifier cela dans le script, en rajoutant une option « always_visible » par exemple qui garantiraient que celles-ci s’affichent en tout temps.
J’y penserai également pour la prochaine mise à jour !
Merci à tous les deux pour vos commentaires !
Bonjour,
je souhaiterais masquer les boutons précédents, suivants et pause,
j’ai déjà essayer de changer le paramètre controls en false, mais le diaporama ne fonctionne plus, on reste bloquer sur la première image.
Merci d’avance.
Effectivement, il y avait un problème lorsque l’option « controls » était désactivée, le diaporama n’allait pas sur l’image d’après. J’ai corrigé le script, mis à jour le tutoriel et la démo et ajouté une nouvelle version 2.01 sur jQuery.com.
Tu peux donc maintenant réessayer, cela devra marcher sans problèmes !
OK, sa marche du tonnerre de zeus ahah,
je te remercie encore mille fois, et bonne journée a toi.
Bonjour Guillaume,
Je suis actuellement une formation de création de site web et réalise en parallèle mon site-portfolio. Ta galerie correspond exactement à ce qu’il me fallait pour présenter mes travaux. Merci beaucoup donc pour ton travail 🙂
Elle fonctionne parfaitement bien (en dév en tout cas 😉
Juste une petite question, comme je n’y connais rien en javascript, y’aurait-il possibilité de mettre le compteur d’image de façon fixe en dehors de la galerie ?
Merci encore
A bientôt
Merci kamcom.
Non il n’est actuellement pas possible de faire cela, mais en bidouillant facilement le script tu peux t’en sortir (afficher le compteur dans un div à l’extérieur du diaporama).
Bonjour, et merci beaucoup pour votre travail, j’ai mis en place le premier diaporama sur deux sites avec succès. J’ai également intégré le second sur un autre site, mais on m’a pointé des soucis au moment du fondu que j’ai pu constater ( des lignes saccadées horizontales ). Difficile de résoudre ce souci, d’autant que je travaille sur Mac, et je ne vois pas le problème quand je travaille. Avez-vous une piste à ce sujet ?
Vous avez bien amélioré la seconde version, et évidemment, on en demande toujours un peu plus… Ayant déplacé les boutons de navigation sous l’image, je souhaiterai également les afficher en continu, mais ne possède pas assez de connaissance pour mettre en place moi-même le » always visible » ! Voici la page concernée : http://www.jackvanarsky.com/large.html
Encore merci pour votre pédagogie et disponibilité.
Cordialement.
Bojour, merci pour ce script, il est vraiment efficace, simple à mettre en place et élégant… Bonne continuation.
Il est super ce diaporama bravo!!!
Je voulais juste savoir s’il était de le dimensionner avec des pourcentages pour qu’il s’adapte à la taille écran du visiteur.
Je réalise un site avec plusieurs frames et j’aimerai que le diaporama s’affiche dans sa totalité (dans l’une de ces frame) sans que l’on ait à monter ou descendre avec la souris.
Merci d’avance et encore bravo!
Bonjour
Tout d’abord, merci pour cet exemple, c’est très efficace et simple à utiliser.
J’ai toutefois un petit souci lors du click pour passer à l’image suivante la page remonte systématiquement tout en haut. Est ce que j’ai raté quelque chose ?
D’avance merci pour votre retour
Effectivement Kevin, il manquait un « return false; » dans les fonctions liées à l’affichage des images suivantes et précédentes. L’archive à été mise à jour sur le serveur.
Merci pour ton commentaire.
Re
C’est parfait. Cela marche nickel.
Merci pour ta rapidité et ton aide.
Vraiment propre beau taff. Je compte utilisé Jdiaporama pour l’un de mes projets actuel cependant la fonction random me manque vraiment. Aurais tu déjà une ébauche concernant ce mode , je compte me cassé un peu la tête cette après midi dessus.
Dans la prochaine version, promis 😉
Bonjour, d’abord merci pour ce diapo très simple d’utilisation. Ensuite j’ai un soucis quand j’utilise internet explorer pour lire ton exemple car pendant le chargement j’ai 4 puces ainsi que le « revenir à l’article » qui apparaissent à la place du diapo pendant un court instant. J’ai également un problème similaire sur le site que je suis en train de faire et j’aimerais savoir si il est possible de rajouter un « onload » pour palier au problème. Étant novice en javascript, je te remercie encore pour la clarté des explications =).
Bravo pour ce diaporama 😉 Vraiment excellent !
J’aurais voulu savoir si il était possible de l’incrusté sur une page php ? car je n’arrive pas, ca me met QUE le texte à l’endroit ou je veux l’incruster.
L’insertion du script est indépendante du langage dans lequel tu programmes. Il suffit d’avoir le bon code html, et d’appeler correctement le plugin dans ton fichier javascript.