Tutorial: Créer un slideshow avec Mootools et NoobSlide

Cela fait plusieurs jours que j’entends parler de Noobslide. Il s’agit d’un slideshow qui vous permettra de faire défiler textes et images dans un espace restreint, le tout agrémenté de transitions du meilleur effet. Seul bémol: Noobslide n’est pas particulièrement bien documenté, ce qui le rends difficilement accessible aux débutants. Voici un tuto pour débuter avec Noobslide et créer votre premier slideshow.

C’est parti!

Commençons d’emblée par une petite capture d’écran histoire de vous montrer ce que vous pourrez faire de beau avec Noobslide:

Si vous n’êtes toujours pas convaincus, ou que vous voulez voir le script en action (pour un slideshow c’est quand même mieux

) c’est ici que ça se passe.
Comme on peut le voir sur la démo, Noobslide propose pas moins de 8 slides différents. Il est bien entendu possible de les customiser à votre guise.

Mise en place

Pour ce tuto, j’ai choisi le premier exemple de la série. C’est à la fois le plus simple à mettre en place et le plus courant.

Nous allons bien entendu commencer par récupérer l’archive de Noobslide.
Une fois dézippée, l’archive contient quelques images (très jolies, d’ailleurs) d’exemple, les scripts js, les css et le framework Mootools.

Nous allons donc inclure tout ce beau monde dans la partie head de notre document html:

<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>

Dans la partie body de notre document html, nous allons créer notre contenu:

<h2>Slideshow</h2>
<div class="sample">
	<div class="mask1">
		<div id="box1">
			<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>

Voilà pour le contenu. Nous avons créé trois conteneurs: sample, box1 et mask1, le dernier faisant comme son nom l’indique office de masque.
Sémantiquement parlant, j’aurais préféré utiliser une liste non-ordonnée (<li>), plutôt que cette longue suite de <span> sans fin, mais pour être honnête je m’en suis à l’heure actuelle tenu à décortiquer les exemples fournis par l’auteur.

Dernière étape: le javascript. Il est temps de donner vie à notre slideshow. Ajoutez le code qui suit dans la partie head de votre document html, ou mieux dans un fichier .js séparé:

<script type="text/javascript">
	window.addEvent('domready',function(){
		var hs1 = new noobSlide({
			box: $('box1'),
			items: [1,2,3,4],
			size: 480,
			autoPlay: true
		});
</script>

Observons ce bout de code de plus près:
La méthode window.addEvent() permet de charger ce code dès que le navigateur à fini de charger l’arbre dom. On gagne donc on performance étant donné que nous n’avons pas besoin d’attendre le chargement complet de la page (et de toute les images!) pour charger ce script. J’avais déja parlé de cette méthode fort utile dans cet article.

Ensuite, nous allons créer une instance de la classe noobSlide. Voyons ce que ça donne au niveau des paramètres:

• box: l’id de l’élément contenant nos images. Dans notre exemple, il s’agit donc de box1. Notez que le sign $ n’est autre qu’un raccourci Mootools de la fonction document.getElementById().
• items: Le nombre de pas du début à la fin du slideshow.
• size: la longueur du slideshow, en pixels.
• autoPlay: Réglé à true, ce paramètre permet, comme son nom l’indique, le défilement automatique.

Pour ce qui est du styling css, étant donné que cet exemple utilise les ids et classes définies par défaut dans la feuille de style fournie, le rendu visuel sera identique à celui des exemples en ligne. Pour ce qui est de la personnalisation, c’est à vous de jouer

Conclusion

Autant être clair, je suis sous le charme de ce script. D’ailleurs, je pense faire d’autres tutos dans la veine de celui-ci, comme par exemple l’étude des exemples du site ou encore l’intégration de noobslide dans Wordpress.
N’hésitez pas à me dire ce qui vous intéresserais!