Tutorial: Créer un slideshow avec Mootools et NoobSlide
Posté par jbj le 16 juin 2008 dans Javascript/Ajax • 26 commentairesCela 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! 
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…
Bonjour, je n’ai pour l’instant pas besoin de ce style de script, mais j’ai apprécié votre précision dans le tutoriel.
Cordialement,
René
Merci pour le compliment
J’adore ce genre de script : non seulement pour l’effet rendu, mais je suis tellement fière de moi quand j’arrive à le faire marcher
C’était un peu mon but en écrivant ce tuto: Ce genre de script est assez peu documenté, du coup si tu n’es pas développeur tu auras un mal fou à en tirer quelque chose.
En tout cas, si tu as su le faire marcher grâce à mon tuto, j’en suis flatté
J’ai vu que toi aussi tu en as parlé sur ton blog il y a quelques temps
Une belle découverte. Bravo pour ce tutorial !
Merci à toi
Salut,
je dégouté j’ai passé un monstre temps a le mettre ne place comme je voulais et je tombe sur ton article après. menfin…
pour ma part je l’utilise dans wordpress mais j’ai quand même un tout petit soucis …
je ne peut utilisé aucun autre appelle pour des fx de mootools il me crée des erreurs.
exemple:
Fx.Slide is not a constructor
[Break on this error] var myVerticalSlide = new Fx.Slide(’footer’);
en tout les cas milles merci!
Salut,
Assez difficile de cerner ton problème, mais j’ai souvent eu la blague, ça peut venir de ta version de Mootools?
Salut,
j’essaye désespérement de’inclure le sample 8, dans mon wordpress, mais sans succés! loin de la même!
pourtant j’arrive a le modifier sans soucis mais dans une page html, dès que c’est dans wordpress, rien ne fonctionne :’(
tu peux voir un exemple sur mon site web (qui est un test d’un nouveau theme, et pas un site internet)
pourrais tu m’aider stp? merci
bon ben finalement, c’etait une “incompatibilité” avec le plugin wp-grins. aprés l’avoir désactiver ca marche impec.
Bonjour, Permets-moi de poser ce qui est peut-être une bête question.Qu’es-ce qu’un conteneur et comment le fait-on ? Un grand merci d’avance.
Daniel
Un conteneur est un élément html destiné à contenir d’autres balises. La balise la plus fréquente dans la création de conteneur est div.
Très joli tuto !
Comme tu poses la question, je serai très intéressé si tu pouvais faire un tuto sur l’intégration de l’exemple 4.
Merci.
@rainbow: J’avais fait un tuto sur l’exemple 7 (je sais plus si c’était ici ou uniquement sur http://www.catswhocode.com , je sais honnetement pas si j’aurais le temps d’en faire un sur l’exemple 4
Au passage, tu site est magnifique. Félicitations!
merci pour ce compliment !
j’ai essayé de mettre en place l’exemple 4 sur mon site : seul problème l’animation ne fonctionne pas !
Je dois avoir un problème au niveau du code javascript qui permet l’animation pourtant c’est le même que sur le site officiel. Ou alors je ne l’est pas placé au bon endroit.
Si tu pouvais m’aider à faire fonctionner stp
(quand tu auras le temps bien sur)
Merci d’avance!
Je viens de regarder avec l’extension firefox “web developper” que je te conseille, et tu as une erreur de syntaxe, il te manque une parenthèse à la fin du code
J’ai rajouté une parenthèse à la fin du code mais rien n’y fait. Voici le code :
window.addEvent(’domready’,function(){
var nS4 = new noobSlide({
box: $(’box4′),
items: $$(’#box4 div’),
size: 480,
handles: $$(’#handles4 span’),
onWalk: function(currentItem,currentHandle){
$(’info4′).set(’html’,currentItem.getFirst().innerHTML);
this.handles.removeClass(’active’);
currentHandle.addClass(’active’);
}
});
)
Firebug m’indique une erreur de syntaxe mais aussi qu’une classe n’est pas définie :
var noobSlide = new Class({
dans le fichier : _class.noobSlide.js
Bien compliqué tout ça à faire fonctionner !
je viens de me rendre compte que j’avais oublié certaines choses dans le header à définir.
Je n”ai donc plus d”erreurs de classes indéfinies mais toujours cette parenthèse à rajouter dont je ne trouve pas l’endroit !
c’est bon j’ai trouvé ca marche !!! Enfin !
Merci pour ton aide !
Content de voir que tu t’en es sorti
ça va bien le faire sur ton thème!
Bonjour,
J’ai reussi à integrer le slideshow sample 1, il fonctionne…
Mais Firebug m’indique une erreur : “B.camelCase is not a function
_mootools.js Line 71″
Est-ce que quelqu’un à une idée, svp ?
merci d’avance
sinon super le tuto
Bonjour,
)
j’ai une petite question : serait-il possible de pouvoir fermer l’animation si l’utilisateur le souhaite en cliquant sur un petit bouton (avec si c’est possible un effet de transition du style déroulant ou fondant
merci d’avance et longue vie à lyxia.org (et cat’s who code aussi !)
Oui c’est possible, mais il faut bidouiller en javascript. Rien de bien dur mais j’ai pas de solution “toute prête” à te proposer, malheureusement.
tant pis je vais essayer de trifouiller dans le code ! merci quand meme !