Petit slideshow en jquery

Dans le cadre d’un projet, j’ai du créer un petit slideshow, une zone présentant des images s’affichant les une après les autres.

Ma dernière expérience du genre (et donc le bout de code présent dans ma bibliothèque perso) datant  de presque 10ans, j’ai préféré effectuer une petite recherche pour trouver un code plus élégant et moderne.

Je suis tombé sur un exemple qui correspondait visuellement à mes attentes sur CSS-Tricks  : Simple Auto-Playing Slideshow

Puis de là un lien vers un autre script simple de Slideshow : Simplest jQuery Slideshow

Je m’en suis fait un mélange des deux que j’ai ensuite modifié en fonction de mes contraintes, notamment celle d’avoir plusieurs slideshow possible dans la page et donc de ne pas utiliser un script se basant sur un id unique mais plutôt sur une classe.

HTML :

<div class="slideshow">
	<img src="" />
	<img src="" />
	<img src="" />
	<img src="" />
</div>

CSS :

div.slideshow{
	margin: 5px auto;
	position:relative;
	height: 80px;
	width: 111px; 
	padding: 10px; 
}

div.slideshow img {
	border: 1px solid #d5d5d5;
	position:absolute;
	left:10px;
	top:10px;
	height: 70px;
	width: 101px;
	display: none;
}

JS :

jQuery(function($){
	$(".slideshow img:gt(0)").hide();
	setInterval(function() { 
		$('.slideshow').each(function(){
			($(this).children(":first")).fadeOut(1000)
			.next('img').fadeIn(1000)
			.end()
			.appendTo($(this));
		});
	},  3000);
});

Comme je le disais, ma problématique par rapport aux codes que j’avais trouvé était qu’ils se basaient sur l’id de l’élément encapsulant les slides ce qui imposait un unique slideshow par page ou alors de définir une fonction javascript par slideshow. Et qui imposait aussi de connaitre les id en question, sachant que dans le cadre du projet nous étions sur un module Joomla, donc positionnable à plusieurs endroits d’une même page de façon dynamique.
En utilisant la classe comme cible dans le DOM, j’ai pu utiliser le ‘.each()’ [ $(‘.slideshow’).each(…);] et ainsi m’assurer que les changements d’images ne se croisent pas si la page présente plusieurs slideshows.

PS : Merci à LE GLOB DE BARGEO pour son astuce permettant d’intégrer du javascript directement dans le corps d’un article WordPress.
Le problème de base étant que l’éditeur visuel reformate même ce qu’on a saisi simplement du coté « texte » en y rajoutant balises et espaces qui invalident le fonctionnement du JS.

Billets similaires

Faire une popup draggable avec JQuery Mobile Konami Code en javascript