Brad Westness.com

After reading my buddy Owen’s blog entry in which he takes it upon himself to document one of his favorite WordPress plugins upon being unable to find satisfactory documentation from the authors, I figured I could do the same for a Mootools plugin I had a similar experience with recently, NoobSlide.

Similar to Owen’s experience with SyntaxHighlighter, the NoobSlide website doesn’t really offer any installation or usage documentation, just a few “check this out” style examples that you have to reverse engineer in order to get the results you want. It’s also only available in Spanish.

Searching for documentation on Google nets a few tutorials, but these are all basically just stolen from the NoobSlide page itself and don’t really offer any additional insight (or any guidance for anyone who wants to do anything other than make an exact copy of one of the given examples).

There also don’t really seem to be any other Mootools slideshow plugins floating around. I use JQuery for my personal stuff, but the site I was working on for this project was already using Mootools for a tab-based navigation effect, so I wanted to stick with that, rather than re-write the whole thing.

I tried to strip out all the unnecessary HTML and CSS from the NoobSlide example I started with (number seven on the NoobSlide homepage). So, if you want to make a clean, simple Mootools based slideshow with clickable thumbnail navigation, you came to the right place.

Step one: the HTML

The HTML for this type of slideshow is fairly straightforward. The slideshow will have two main elements, the thumbnails for navigation and the slideshow itself. The slideshow needs a “mask”, or container so that the images which are “outside” the slideshow can be hidden. Think of it as a window with a filmstrip behind it. We want the window just big enough to see one frame of the filmstrip, which we will move back and forth, keeping all non-selected images obscured.

Without further ado, here’s the HTML we will use:

Notes: Obviously, the src attributes should point to the relative paths to your thumbnails and slide images, respectively. You’ll also need to add “alt” attributes if you want the page to pass validation.

Step two: the CSS

The NoobSlide demo page uses a whole mess of CSS tags and confusingly named classes and id’s, so I’ve attempted to simplify things as much as possible. Here’s the CSS code you will need to include in your page to ensure the slideshow will work:

#slide-mask {
	position:relative;
	left:0;
	margin:0;
	padding:0;
	width:502px;
	height:280px;
	overflow:hidden;
}
#slide-images {
	position:relative;
	left:0;
	width:9000px;
	height:280px;
}
#slide-images img {
	float:left;
	width:502px;
	height:280px;
}
#slide-thumbs {
	position:relative;
	background-color:#ffffff;
	width:298px;
	height:280px;
	float:left;
}
#slide-thumbs img {
	width:146px;
	height:52px;
	float:left;
	cursor:pointer;
	margin:3px 0 0 2px;
}

Notes: The height and width in the “#slide-mask” and “#slide-images img” properties should be the same as the height and width of the images you are going to be using as slides (all the slides should be the same size as well).

The height of “#slide-images” should be the same as the height of your slide images, but the width should be large enough to hold all of your images side by side (the whole filmstrip), which is why I have it set to 9000px.

“#slide-thumbs” can be whatever width and height you want, here I have it wide enough that two of the thumbs will fit next to each other, resulting in a two column, five row layout (since we have ten thumbnails and ten slides).

“#slide-thumbs img” should have the width and height set to the size of your thumbnail images. The margins here can be set to whatever you want, and the cursor:pointer attribute serves to let the user know that the thumbnails will do something when clicked.

Step three: the JavaScript

  window.addEvent("domready", function ()
  {
	var effect = {property:'left',duration:700, transition:Fx.Transitions.Linear, wait:false};
	var nS = new noobSlide({
		box: $('slide-images'),
		items: [0,1,2,3,4,5,6,7,8,9],
		size:502,
		handles: $$('#slide-thumbs img'),
		fxOptions: effect,
	  	onWalk: function(currentItem,currentHandle){
		  $each($$(this.handles), function(handle,index){
				handle.get('tween', {property: 'opacity', duration: 'short'}).start(1);
		});
	      currentHandle.get('tween', {property: 'opacity', duration: 'short'}).start(0.5);
	 	},
	});
  });

Notes: The “effect” variable is the transition that will be used to switch between images upon clicking a thumbnail. All the inner functions under “onWalk:” might look scary, but it just creates the effect of lightening the currently selected thumbnail.

Just make sure “box:” is set to whatever you gave to your filmstrip div (the one with the really wide width), and “handles:” is set to select the thumbnail images. “items:” should just be a count (starting at zero) of the number of images in the slideshow, and “size:” should be set to the width of an individual slideshow image.

Step four: there is no step four

Other than including the Mootools and NoobSlide scripts in your page, you should now have a working slideshow.

You can modify this implementation to scroll vertically by altering the “effect” variable in the supplied JavaScript to have “property” set to “top” and adjusting the CSS for the slide-images div to have a height of 9000px (or whatever size will hold all of your images end-to-end) and a width equal to the width of one of your images.

If you have any questions or suggestions, feel free to leave a comment. Or, if your’re a masochist who really wants to reverse-engineer something, you can download a demo of this code.