Cycle, un plugin jQuery pour créer un diaporama photo

12 septembre 2010

Cycle est un plugin jQuery qui permet de créer un diaporama photo. L’outil est assez souple : plus d’une cinquantaine d’options sont configurables pour personnaliser les effets de transition, la vitesse d’animation, l’appel de fonctions de callback, etc. Simple et rapide à mettre en place.

Des transitions personnalisables

Toutes les caractéristiques de base d’un slideshow sont personnalisables : la vitesse d’animation, la lecture en boucle, le mode de déclenchement, l’appel de fonctions de callback, ou encore la mise en pause… Mais c’est surtout le nombre de transitions qui est remarquable : grâce au plugin jQuery Easing, vous pouvez utiliser une multitude d’effets de transition avec les fonctions « easing ».

Un diaporama facile à mettre en place

Après avoir inclus la librairie jQuery et le plugin Cycle, on définit la structure HTML de la façon suivante avec une simple div contenant des images.

<div class="slideshow">
	<img src="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg" width="200" height="200" />
	<img src="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg" width="200" height="200" />
	<img src="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg" width="200" height="200" />
	<img src="http://cloud.github.com/downloads/malsup/cycle/beach4.jpg" width="200" height="200" />
	<img src="http://cloud.github.com/downloads/malsup/cycle/beach5.jpg" width="200" height="200" />
</div>

Puis on fait appel au plugin Cycle.

$(document).ready(function() {
    $('.slideshow').cycle({
		fx: 'fade' // choose your transition type, ex: fade, scrollUp, shuffle, etc...
	});
});

C’est terminé, votre diaporama fonctionne. A vous maintenant de le personnaliser comme bon vous semble.

Requis : jQuery
Démonstration : http://jquery.malsup.com/cycle/
Licence : libre

Commentaires

  • tyty

    merci !