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

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 !

Ce contenu a été publié dans JQuery, avec comme mot(s)-clé(s) , , . Vous pouvez le mettre en favoris avec ce permalien.

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

  1. Hadrien01 dit :

    C’est ce que je recherche depuis longtemps ! J’ai par contre quelques questions : Pour le deuxième code, où faut-il le mettre ?
    Et où faut-il mettre le code téléchargé et l’appeler en html ?

    Merci d’avance

  2. Zourite dit :

    Moi j’ai une question très existentielle ils sont ou les fichiers à télécharger ?

  3. Lauwers dit :

    Idem que Zourite.

    Ou sont les Scripts, JQuery et autres …………….. ???????????????

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *