29 octo

Tutoriel: Réaliser un diaporama simple avec JQuery

Publié par Gui dans Développement, jQuery, Tutoriels

Difficulté : Facile

Technologies utilisées : 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 :

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.

119 commentaires

« 1 … 3 4 5 6 »

Patoche
2 octobre 2014

Bonjour et merci pour ce tuto très instructif.
Petite question : comment se fait le lien entre les états et play et le clic ?
C’est bien le cas pour prev et next :
obj).siblings().find(« .prev »).click(function()…{}
Pour alterner pause et play je lis :
obj).siblings().find(« .pause »).toggle(){…} j’ai bien constaté que cela fonctionne mais je ne vois pas où se fait le lien avec un clic

Répondre
Megharbi
11 octobre 2014

Voila je souhaite suivre la même procédure mais sans la barre de navigation.
J’ai rentrée le code sans les commande mais cela ne fonctionne point, la diapo reste figé a la première image .

Une suggestion ???

Merci par avance

Répondre
André Roy
2 novembre 2014

Peut-on afficher le diaporama en plein écran et en sortir avec la touche « escape »

Merci et Au Plaisir !

André Roy

Répondre
nadia
16 février 2015

merci beaucoup pour ce premier tuto!!! pour la 1ère fois, je vois mon diaporama on line!!!

Répondre
0cool
5 avril 2015

Bonjour , mercii et super bravo pour ce tuto.
Bon , après tous ces compliments , il est temps que tu te remettes au travail, afin que le diaporama s’adapte à tous les navigateurs et que les photos apparaissent en plein écran.
A bientôt et merci.

Répondre
Denis
17 mai 2015

Bonjour
Je ne parviens pas à changer les images

Répondre
zotre
6 novembre 2015

merci je veux essayer

Répondre
Soumaya
22 novembre 2015

Bonjour,

Merci beaucoup pour ce tuto,

J’ai exactement le même besoin mais mes images sont dans une base de données Mysql.

A quel partie du script, on interagit avec la BD.

Merci!!

Répondre
gwen
24 novembre 2015

Merci, je suis très content d’avoir trouvé ce tuto qui fonctionne aussi pour mobile. Est ce que tu pourrais juste ajouter le petit plus pour que le diaporama soit responsive ? Merci 😉

Répondre
Yann
21 mai 2016

Bonjour, le « delay » est en milliseconde ?

Répondre
pika
8 février 2017

Bonjour, tout d’abord merci pour ce tuto, ensuite j’ai une question, comment faire pour afficher 3 images en même temps dans le slideshow ?

Et quand on clique sur suivant ou précédent l’une des image disparaît pour laisser la place à une nouvelle image ?

J’ai essayé avec un array, mais je n’y arrive pas…

Répondre
erencontrefemmecougar:com
6 mai 2017

Thank you for posting this awesome article.
I’m a long time reader but I’ve never been compelled to leave a
comment. I subscribed to your blog and shared this on my Facebook.

Thanks again for a great article!

Répondre
دانلود آهنگ
26 juin 2017

Thank you for posting this awesome article.

Répondre
دانلود اهنگ جدید
30 juin 2017

nice . best article

Répondre
محسن چاوشی
12 juillet 2017

very tnx for this artticle

Répondre
http://canal-telegram.ir
8 août 2017

Hello
It was very interesting and informative.
I hope you always good luck

Répondre
nexvan
9 août 2017

It was useful

Répondre
new1music
30 août 2017

goood post
thanks

Répondre
سرویس و نگهداری آسانسور
16 septembre 2017

realy tnx. realy usefull.realy good site

Répondre
sahar sadat
7 octobre 2017

amazing

Répondre