Tutorial Noobslide avancé: Galerie avec images cliquables
Posté par jbj le 15 juil 2008 dans Javascript/Ajax • 19 commentairesIl 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
Yes! Beaucoup mieux que le dernier.. ya pas photo ^^
Content qu’il te plaise
J’en ferais peut-être d’autres sur Noobslide si ça intéresse 
C’est dommage qu’il n’y ait pas de page pour prévisualiser le résultat.
Ça serait une bonne idée de mettre ça en place, comme sur CSSPlay.
Merci pour le tuto, j’adore ce script, ça apporte beaucoup de fraicheur à la disposition des images!
Bonjour,
Merci pour ce tuto qui semble utile. Cependant, j’ai un petit problème à l’affichage de la page générée. Tout d’abord, dans la barre d’état, j’ai le message « Terminé mais reste des erreurs ». Ensuite je n’ai que l’image centrale du diaporama qui s’affiche, et c’est d’ailleurs toujours img1.jpg (même si je change la valeur du startItem ds le js). Comme je suis débutant, je n’arrive pas à trouver mon erreur :S
Salut François,
La première des choses à faire, c’est de virer cette m… d’Internet Explorer et de mettre un navigateur standard à la place (Firefox, safari, opera…)
Pour le reste, tu as un endroit ou je peux regarder ton code en ligne? (Inutile de copier coller le code ici, ça ne passe pas avec Wordpress)
Arf… Mon code est encore en local, je pourrais peut-être t’envoyer mon code par mail ou te l’uploader? L’autre souci c’est qu’une partie de mon design (qui reste très très sommaire) ne passe pas sous firefox… N’hésite pas à me contacter par mail (tu dois déjà l’avoir par l’intermédiaire de ce forum)
Ton design passe pas sous firefox? En général c’est sous ie que ça passe pas mais si tu t’en es servi comme référence ça explique surement le truc…
Je suis désolé mais je n’ai que peux de temps, et je ne peux pas regarder des codes par mail. Par contre, si tu le mets sur un serveur, la je peux regarder ce qui va pas:)
Ouf! Après quelques péripéties, j’ai réussi à mettre mon site en ligne, ce ne sera peut-être pas l’adresse finale, mais ça te permettra de te faire une idée. Le CSS de NoobSlide et le mien rentrent un peu en conflit g l’impression, donc la page avec les photos est:
http://rolldatsushi.ueuo.com/photo.html
et le design original ressemble à ça:
http://rolldatsushi.ueuo.com/artofliving.html
Bon, c’est du gros bidouillage, je sais, en fait je tentais de me faire un peu les dents avant de mettre en ligne. En tout cas, merci de prendre sur ton temps pour m’aider, c’est cool!
C’est bon c’est résolu… J’avais dû oublier une partie du code, je crois :S car j’ai tout repris hier soir et ça marche à peu près bien, à part quelques conflits .css qui subsistent…
Salut,
superblog tiptop remplis d’informations
justement sur les nouvelles merveilles de mootools entre autres,
mais pour en revenir à la dernière galerie publiée « sample 7, sur la galerie avec images cliquables » avec noobslide
peut on imaginer la même chose avec le menu dans une frame fixe et faire defile une frame mise à coté de bas en haut
Salut,
Je souhaiterais utiliser ce script en affichant un ensemble de photos issues d’une requête de base de données Mysql. Le seul problème c’est que le nombre total de photos varie. J’aurais aimé en fait pouvoir afficher par exemple les 8 1ères photos puis ensuite naviguer à l’aide de liens « previous » « next » pour afficher le reste des photos. Un peu comme dans le noobSlide Sample 2 mais avec 8 images affichées au lieu d’une.
J’ai essayé de mixer le code de plusieurs samples mais sans résultat.
Si quelqu’un a une idée…
Merci beaucoup, je vais pouvoir l’utiliser pour mon futur site.
Je veux bien virer Explorer, mais la majorité des personnes qui entrent sur mon site l’utilisent , et donc est-ce que le script fonctionne correctement avec Explorer?
Ce script fonctionne correctement avec Internet Explorer, mais on n’est jamais à l’abris de mauvaises interactions avec le contenu de la page. D’où l’utilité d’avoir les principaux navigateurs du marché pour tester son site.
Bonjour!
Merci bien pour ce script super! Par contre j’ai une question: comment faire pour que si on choisit la photo manuellement en cliquant en bas, y a t il moyen de faire que le défilement automatique s’arrête pendant un délai plus long ou définitivement?
Merci bien!
merci pour se petit tuto!
Salut,
Par ailleurs, en supprimant tous les appels jQuery de mon header pour voir s’il y a bel et bien conflit, çà ne change rien. Même chose en tentant de désactiver les extensions… Et pourtant mon thème n’a rien d’extraordinaire, peu d’extensions activées… Bref, si quelqu’un a une idée ou rencontre le même genre de problème, qu’il n’hésite pas à nous en faire profiter car je crois que nous sommes nombreux à nous casser la tête là-dessus ! Merci d’avance 
Merci pour le tuto extra comme d’hab. Tout fonctionne parfaitement bien en créant une nouvelle page html. Par contre, en intégration dans Wordpress, pas d’animation noobSlide possible, alors que mon coda-slider (jQuery) fonctionne. J’ai trouvé quelques infos au sujet des conflits entre Mootools et les autres librairies comme jQuery (voir : http://209.85.229.132/search?q=cache:2aegA5MhjF0J:wordpress.org/support/topic/280232+yheme+wordpress+avec+noobslide&cd=14&hl=fr&ct=clnk&gl=fr) mais ce n’est pas très convaincant
Salut beugs je l’ai utiliser sous un wordpress il marche parfaitement bien en faites j’ai utiliser l’exemple 8 mais vérifie bien que tu l’as bien intégrer en gardant les span les box5 etc…