Let’s starts with a screenshot to see what you’ll be able to do with Noobslide:
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.
Let’s including all this beautiful people in the head part of our html document:
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.
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
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.