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.

Diaporama simple avec JQuery

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 :

Diaporama simple avec JQuery

Troisième étape: partie JQuery

Nous allons avoir deux fichiers javascript :

  1. Notre fichier plugin « jquery.diaporama.js« 
  2. 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 :

  1. On utilise function($) pour explicitement dire qu’on va utiliser l’alias « $ » dans notre fonction
  2. 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
  3. 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 :

  1. delay: le délai de balayage des images
  2. animationSpeed: la durée de l’effet de transition
  3. 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
  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:

  1. Vérifier que la liste contient au moins deux photos
  2. Initialiser nos variables
  3. 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

1 2 3 4 5 6
  1. Rin
    25 novembre 2011

    Tt simplement génial 😀 merci, ca permet de saisir les choses très vite 😀

    Répondre
  2. Max
    8 décembre 2011

    Bonsoir,
    je cherche à mettre ce type de diaporama sur ma page d’accueil
    si je le mets en index.php ça ne marche plus du tout
    c’est normal ou faut modifier qqchose dans le .js ??

    Merci bcp
    Max

    Répondre
  3. piem
    14 décembre 2011

    Bonsoir,
    l’affichage sur ie6 et ie7 est défaillant. La liste à puces est totalement visible et le diapo ne fonctionne pas. Sans doute un petit réglage à faire?
    Aurais-tu une réponse à ce sujet.
    Sinon c’est nickel, merci encore pour ce beau petit bijou.

    Répondre
  4. lionel
    3 janvier 2012

    Bonjour,

    Comment doit on faire pour que le diaporama ne rattrape pas son retard lorsque la page n’était pas affichée?

    Quand mon diaporama est dans un onglet du navigateur, et que je surfe sur une autre page, quand je reviens sur le diaporama, il « rattrape » son retard en faisant défiler tout très vite…

    Répondre
  5. MoOoH
    3 janvier 2012

    Re-Bonjour,

    J’ai remarque que mon site http://www.bullesdesavon.fr ne s’affiche pas correctement quand la connexion est un peu lente (2-300ko/s).
    Je m’explique.
    Mes diaporamas contiennent un certain nombre de photos de 4-500 ko. Et pendant le défilement des premières images, les images ne s’affichent pas complétement.

    Ma question est simple, comment pourrais-je forcer le chargement des premières images du diaporama avant les autres ?

    Pour information, j’ai vu qu’il n’y a pas grand chose à faire, si ce n’est mettre les images le plus haut dans le , et qu’elles sont déjà quasiment au plus haut dans le code ?
    En fait, j’ai l’impression que les images se chargent simultanément alors que j’aimerai forcer un téléchargement séquentiel du contenu de la page.

    D’avance merci.

    Répondre
  6. Colince
    16 mars 2012

    Ce tutoriel est vraiment magnifique.Cela m’a sauvé la semaine

    je te dis mille fois merci

    Répondre
  7. giftofgod
    17 mars 2012

    Chapeau.Dieu te bénisse pour cet excellent tuto.
    Ca marche a fond.
    Please continuer ainsi.

    Répondre
  8. Patrick
    28 octobre 2012

    Bonjour,

    Est-il possible que le diaporama s’adapte automatiquement à la taille de l’écran ?

    Répondre
  9. Patrick
    29 octobre 2012

    Merci MoOoh pour le lien.
    Gui : Est-ce envisageable pour la prochaine version ?

    Répondre
  10. francis
    29 octobre 2012

    contrairement à ce que pensais, j’ai pu l’intégrer dans une signature de forum. enfin, en passant par la création d’une page web et en intégrant la page en signature via la balise IFRAME.

    par contre je n’ai pas pu uploader la version 3 sur guithub, j’ai fait le truc avec la v1

    encore merci 😉

    Répondre
  11. amina
    25 avril 2013

    salut donc moi je créer une page html et je le sougarde point html et une page css et je souvgared poit css et une page jquery et ………… ? merci

    Répondre
  12. Anthony
    27 juin 2013

    Salut super ton tuto,
    mais j’ai un petit souci,
    j’ai bien exécuter ton code comme expliquer,
    mais aucune animation ce met en route et je n’arrive
    pas à déterminer d’où cela provient

    Répondre
  13. micofo
    25 juillet 2013

    Grand merci infiniment, tu m’as sauver toute une semaine de recherche!!!!!

    Répondre
  14. ghis
    31 août 2013

    J’y comprends pas grand chose au javascript mais j’ai réussi à m’en sortir alors MERCI beaucoup pour ce tuto fort bien mené.
    je n’ai qu’une toute petite question :

    comment faire pour que le diaporama se lance sur demande et non automatiquement dès l’ouverture du site ?

    mon petit doigt me dit que ce ne doit pas être grand chose…
    non ?

    Répondre
  15. Gray
    5 septembre 2013

    Vraiment merci pour ce tuto.Je cherchais à inserer les boutons de défilement depuis un bon moment.Encore merci

    Répondre
  16. Sandra
    13 septembre 2013

    Bonjour,

    Merci beaucoup pour ce tuto très bien expliqué et facile à réaliser pour les débutants en jquery…
    J’aimerais juste savoir s’il est possible de passer (aussi) à l’image suivante en cliquant directement sur l’image ?

    Merci beaucoup,
    Sandra

    Répondre
  17. darkmoon
    19 décembre 2013

    bonjour, super script
    est il possible d’afficher le nom de l’image chargée en dessous du slideshow ???
    si oui comment ???

    merci

    Répondre
  18. Jaz Thunderstorm
    9 mai 2014

    Merci beaucoup pour ce tuto,ça marche à merveille.

    Répondre
  19. Mylis
    29 mai 2014

    Good!!!!!!!!!!!!!!!

    Répondre
  20. marc
    17 août 2014

    Salut super ton tuto,
    mais j’ai un petit souci,
    le diaporama bloque au bout ds 5 images.
    est -il possible d’avoir un diaporama avec 10 a 15 images.

    merci d’avance

    Répondre
1 2 3 4 5 6

Laisser une réponse à piem

Cliquez ici pour annuler la réponse.

Post shadow
←
→