How to: Creating a slideshow with Noobslide

Posted by Jean-Baptiste Jung on Jun 23, 2008 in Web development • 20 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.

20 reactions

» Comments RSS Feed

Leave a comment