Magazine Internet

Tutorial: Créer un slideshow avec Mootools et NoobSlide

Publié le 16 juin 2008 par Jbjweb

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:

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

:)


Retour à La Une de Logo Paperblog

LES COMMENTAIRES (5)

Par zazapeta
posté le 24 juillet à 13:07
Signaler un abus

Bravo pour ce tuto !

Par David-B
posté le 03 octobre à 11:16
Signaler un abus

Bonjour, Je souhaiterai mettre un sldeshow de vignette photo en colonne laterale su mo site typepad. si vous avez un conseil merci

Par adeline
posté le 16 juin à 14:56
Signaler un abus

Bonjour,

Tout d'abord merci pour ce tuto vraiment extra! Je voulais savoir si tu pouvais m'expliquer comment intégrer ce silde dans plusieurs pages de wordpress. L'idée étant d'avoir un slide avec des photos différentes sur chaque page. Faut-il que je crée un nouveau modèle de page à chaque fois ou est-ce possible de placer le code directement dans la page via l'éditeur htmlk du cms?

Merci d'avance pour ta réponse.

Adeline

Par rija
posté le 30 mars à 13:02
Signaler un abus

slt, j'utilise le slide2. Le probleme c'est que je veux utiliser plusieurs slide de type 2 dans mon appli. mais ca ne marche pas. qu'est ce qu'il faut faire ?

Par jer666
posté le 24 juin à 19:43
Signaler un abus

salut :)

superbe tuto. J'essaye desespérement d'appliquer le sample 8 sous ordpress, mais impossible! dans un html classique oui aucun probleme, mais dans wordpress.... as tu eu l'occasion de tester sous wp? merci :)

A propos de l’auteur


Jbjweb 18 partages Voir son profil
Voir son blog

l'auteur n'a pas encore renseigné son compte l'auteur n'a pas encore renseigné son compte l'auteur n'a pas encore renseigné son compte

Magazine