Tutorial : un diaporama JQuery facile et simple avec le plugin JQuery Slideshow

Le plugin JQuery Slideshow permet de créer un diaporama très simplement. Il n’y a qu’un seul effet de transition : le fondu enchainé (fadeIn/fadeOut) et un seul à paramètre à régler : le temps de défilement des images.

Pour le code HTML, c’est tout ce qu’il y a de plus simple, on prend un bloc (auquel on donne un id pour le sélectionner avec JQuery) dans lequel on ajoute des images (avec la balise… <img /> !) :

1
2
3
4
5
6
7
8
9

<div id="slideshow">
	<img src="image1.jpg" alt="image 1" />
	<img src="image2.jpg" alt="image 2" />
	<img src="image3.jpg" alt="image 3" />
	<img src="image4.jpg" alt="image 4" />
	<img src="image5.jpg" alt="image 5" />
	<img src="image6.jpg" alt="image 6" />
	<img src="image7.jpg" alt="image 7" />
</div>

Et pour le JQuery, c’est aussi simple car il n’y a qu’un seul paramètre. Le plugin Slideshow s’occupe de tout le reste :

1
2
3
4
5

$(document).ready(function() {
	$('#slideshow').slideshow({ // on applique le diaporama sur le bloc ayant pour id 'slideshow'
		timeout: 1500 // chaque image restera affiché 1 500 millisecondes (soit 1.5 seconde)
	});
});

Un plugin tout simple mais diablement efficace !

Sur le même sujet (en théorie ) :

• Plugin JQuery : info-bulles simple avec Wtooltip
• Plugin JQuery : effet avant/après avec le plugin Before/After
• Tutorial plugin JQuery : Tweetable pour afficher le flux d’un membre Twitter
• Plugin JQuery : galerie photo avec HoverScroll
• Plugin JQuery : les infos-bulles ultimes avec le plugin Qtip