How to: Creating a slideshow with Noobslide

by Jean-Baptiste Jung. 39 Comments -

Noobslide is a Mootools based slideshow script that allows you to slide images and text with eye-candy transitions effects. The only problem with Noobslide is its lack of documentation, which make it hard to understand if you’re new to javascript. Here is a tutorial for beginners with Noobslide to create your first slideshow.

Let’s starts with a screenshot to see what you’ll be able to do with Noobslide:
Noobslide Tutorial

If you’re still not convinced, or want to see a live demo of the script (Which is surely better for a slideshow ;) ) you’ll find some very nice exemples here.
As we can see on the demo, Noobslide can be used for many diffrerent slideshow templates. Of course, you can customize it to perfecty fits your needs.

For this tutorial, I chose to explain the first exemple of the demo. It’s both the simpler and the most common.

We’ll of course start by downloading Noobslide zip archive.
Once unzipped, the archive contains some pretty exemple images, the javascripts, css and the Mootools framework.

Let’s including all this beautiful people in the head part of our html document:

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

In the body part, we’ll create our content:

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

Here’s for the content. We created three divs: sample, box1 and mask1.
For semantic reasons, I’d prefer to use an unordered list (<li>), rather than this endless <span> list, but to be honnest with you, for now I just played around with the exemple provided by the author.

Last step: the javascript. It’s now time to make our slideshow move. Add the following code to the head part of your html document, or even better in a separate .js file:

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

Let’s have a look to this code snippet:
The window.addEvent() method will load this code when the browser had loaded the dom tree. It’s a clear performance gain since we don’t need to wait for the images to load before loading our script.
Then, we’ll create an instance of the noobSlide class.

  • box: The id of the main container. In our exemple, it is box1. Note that the dollar ($) is a Mootools shortcut to the document.getElementById() function.
  • items: Number of steps from the beginning to the end of the slideshow.
  • size: Slideshow width, in pixels.
  • autoPlay: When set to true, this parameter allows noobSlide to slide automatically at regular intervals.

I will not speak about the css part of it: As this exemple uses the default ids and classes defined in the provided stylesheet, it will look like the online demo.
If you want to customize it, it’s up to you ;)

Conclusion

Really, I love this script, and had much fun testing it and writing this tutorial. So, I plan to write more tutorials like this one, like for exemple studiying some other exemples from the demo website or noobslide integration in WordPress.
Interested? Don’t hesitate to tell me what you’d like to read! :)

Edit (07/14/2008): Another noobslide tutorial is available here.

Comments (39) - Leave yours

  5. Blake said:

    Thanks for writing this. If you have some time Sample #6 has been giving me some trouble and would love to see an explanation.

  6. jbj said:

    Sample6 shall be a good idea for a new tutorial. Thank you for contributing.
    Don’t forget to suscribe to our rss feed, so you’ll be sure not to miss the tutorial when I’ll write it ;)

  7. Format6 said:

    This has been a real help thanks, 2 questions tho:
    1) Can u change the speeds i.e. per slide / slide time ?
    2) Is there a way to join the first slide onto the end of the last. i.e. keeping going with out the rush back at the end?

    Thanks heaps

  8. jbj said:

    You’re welcome.
    1) The interval parameter allows you to set the duration of each slide, in milliseconds.
    2) I never tried but I’m pretty sure it’s possible. I’ll let you know when I’ll have more info.

    Btw, a new noobslide tutorial is on the way, so you should suscribe our rss feed to know when it will be available.

  9. Dan said:

    I’d like to use a combination of the samples on http://www.efectorelativo.net/laboratory/noobSlide/

    I want to use sample 4 but with thumbnail images instead of text links [easy]. However i’d like each of the thumbnails to have a title layered over the top like the main images on sample 6.

    Any ideas how to achieve this?

  10. Format6 said:

    Hey thanks, all subscribed. Tryed to get sample 7 working but as soon as I remove any of the box divs from the other samples it falls over. But anyways I will wait keenly for the next tutorial.

    Thanks again keep up good work.

  11. jbj said:

    @Dan: According to the onWalk method on sample6 script, the author injects title and paragraph by using javascript. I didn’t tried it, bt I think you can easily do the same thing on sample 4.

    @Format6: Lucky you, I’m currently working on a tutorial for the sample 7. Hope it will be ready to be posted soon!

    • Jann said:

      Jacob, could you let me know what you did? I’m having the same trouble. Saw elsewhere an error caused by curly quotes but don’t see any…

  15. Pam said:

    Hi, I’m working on Sample 5 and would like to know if there is a way to have a control that takes you all the way back to start, and another that fast-forwards to the last slide.

    Thanks for your help and for providing this tutorial. :-)

  17. Pam said:

    Thanks… have you made any headway by chance? Beggars can’t be choosers and I know you must be very busy so let me know how I can contribute a few $$ to your cause. :-)

    Pam

  18. jbj said:

    @Pam: Sorry for the late reply. I studied a bit sample 5 but I can’t get it to work alone too. Really weird. I’ll keep you informed if I find the problem.

  19. Derrik said:

    Hey there, I really enjoyed this tutorial. But I was just wondering.. how do I get more than one slide show on my page? I tried to figured it out myself.. but nothing seems to work. Anyone? :)

  23. Zeeshan said:

    Thanks dude for coping the source from noobslide.com This tutorial would have been much more useful had you explained what the javascript does to make noobslide much more customizable and not just copy paste the code you find 4fm the source file ;) .

  25. NFO said:

    I’d like to see sample 2 implemented in a wordpress template (in loop before ‘the_content’?), and using the inbuilt wordpress gallery feature to provide the images. Would you consider pulling a post’s ‘embedded’ files (children) references from DB and then displaying them in noobSlide form? How would you go about getting the ‘box’ and ‘items’ values?

  28. Joe said:

    how would you go about adding the code for the version 5 (photo with text) to a page on your site? I am using dreamweaver as my site design/edit tool. thanks in advance for the info!

  29. Maria said:

    I am trying to add 2 slideshows (Sample 5) on the same page. I copied the javascript but changed the var, box and buttons nmaes. In the HTML area I changed div box and div info names. The caption changes, but not the photo on the second slideshow.

  31. Sergul said:

    i am using sample 4 from the demo Page and it works.
    But i need a more generic approach with PHP.

    How can use the same script several times on one page.
    Could you show me an example i am more used to using jQuery with classes to acive this.
    I dont know how to do it with mootools

  33. DK said:

    SOLUTION: HOW TO USE SAMPLE 4 AND REMOVE THE OTHER SAMPLES:

    1.) Click the “noobSlide (rev.19-06-08) para mootools 1.2 ” link at the top of the page with all the samples (http://www.efectorelativo.net/laboratory/noobSlide/) to download the code
    2.) Run the code and make sure it shows properly
    3.) Within the tags remove all the code labeled for each sample except the code for sample 4 AND for sample 8. (don’t ask me why. Trial and error). Be sure the closing tag is still there.
    4.) In the body you can the code for everything except the “Sample 4″ code.

    That’s it! Hooray!

    • DK said:

      Above clarification:

      3.) Within the “head” tags remove…
      Be sure the closing “head” tag is still there
      4.) In the body you can “remove” the code for…

  34. Deniz said:

    For everybody who just wants to have sample 6, this might help:

    http://www.liveimage.de/opensource/noobSlide-sample6.zip

    I extracted everything and just left sample 6.
    Share this with others!

  35. Ina Bauer said:

    Can somebody please tell me why the slide show doesn’t work . . .
    http://www.1-2-brei.de/noobslide_testing.html
    A hint is well appreciated. Thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *

Please respect the following rules: No advertising, no spam, no keyword in name field. Thank you!