Tutorial Noobslide avancé: Galerie avec images cliquables

Il y a quelques temps, j’avais posté sur ce blog un tutorial parlant de Noobslide, script Javascript basé sur Mootools et permettant de mettre en place de magnifiques galeries et slideshows. Je vous propose aujourd’hui un nouveau tuto expliquant la mise en place d’une galerie d’images animée.

Première partie: Création du document HTML

Une fois que vous avez téléchargé l’archive de Noobslide, créez un document html que vous nommerez sample7.html, dans le répertoire class.noobSlide.js.
Nous devons inclure les feuilles de style, ainsi que les classes Mootools nécessaires au fonctionnement de Noobslide:

<link rel="stylesheet" href="_web.css" type="text/css" media="screen" />
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script type="text/javascript" src="_mootools.js"></script>
<script type="text/javascript" src="_class.noobSlide.js"></script>

Nous pouvons maintenant créer le html pour notre galerie. Collez le code ci-dessous dans la partie body de votre document html.

<h2>Sample 7</h2>
<div class="sample">
	<div class="mask6">
		<div id="box7">
			<span><img src="img1.jpg" alt="Photo" /></span>
			<span><img src="img2.jpg" alt="Photo" /></span>
			<span><img src="img3.jpg" alt="Photo" /></span>
			<span><img src="img4.jpg" alt="Photo" /></span>
			<span><img src="img5.jpg" alt="Photo" /></span>
			<span><img src="img6.jpg" alt="Photo" /></span>
			<span><img src="img7.jpg" alt="Photo" /></span>
			<span><img src="img8.jpg" alt="Photo" /></span>
		</div>
	</div>

	<div id="thumbs7">
		<div class="thumbs">
			<div><img src="img1.jpg" alt="Photo Thumb" /></div>
			<div><img src="img2.jpg" alt="Photo Thumb" /></div>
			<div><img src="img3.jpg" alt="Photo Thumb" /></div>
			<div><img src="img4.jpg" alt="Photo Thumb" /></div>
			<div><img src="img5.jpg" alt="Photo Thumb" /></div>
			<div><img src="img6.jpg" alt="Photo Thumb" /></div>
			<div><img src="img7.jpg" alt="Photo Thumb" /></div>
			<div><img src="img8.jpg" alt="Photo Thumb" /></div>
		</div>

		<div id="thumbs_mask7"></div>

		<p id="thumbs_handles7">
			<span></span>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
			<span></span>
		</p>
	</div>
</div>

Ce bout de html est loin d’être parfait en terme de sémantique, même si ça ira parfaitement pour cet exemple. D’ailleurs, pourquoi ne pas réécrire ce code avec une meilleure structure en guise d’exercise?

Deuxième partie: Javascript

On va pouvoir s’amuser

Voici donc le fameux code qui animera notre contenu.
Vous n’avez qu’à le coller dans la partie head de votre document html, ou mieux, le placer dans un fichier .js séparé.

<script type="text/javascript">
	window.addEvent('domready',function(){
		var startItem = 3; // First item to be displayed
		var thumbs_mask7 = $('thumbs_mask7').setStyle('left',(startItem*60-568)+'px').setOpacity(0.8);
		var fxOptions7 = {duration:1000, transition:Fx.Transitions.Back.easeOut, wait:false}
		var thumbsFx = new Fx.Style(thumbs_mask7,'left',fxOptions7);
		var hs7 = new noobSlide({
			box: $('box7'),
			items: [0,1,2,3,4,5,6,7],
			handles: $ES(’span’,'thumbs_handles7′),
			fxOptions: fxOptions7,
			onWalk: function(currentItem){
				thumbsFx.start(currentItem*60-568);
			},
			startItem: startItem
		});
		hs7.walk(0);
	});
</script>

Et voilà! Vous diposez désormais d’un magnifique slideshow. Si vous avez des commentaires, des questions ou des idées d’amélioration, n’hésitez pas à m’en faire part