• Demos and Downloads!
• MooTools Plugins
• About / Contact

Create a Simple Slideshow Using MooTools, Part II: Controls and Events

Last week we created a very simple MooTools slideshow script. The script was very primitive: no events and no next/previous controls -- just cross-fading between images. This tutorial will take the previous slideshow script a step further by:

• Adding "Next" and "Previous" controls.
• Adding a "Table of Contents" so the user may click to any image.
• Pausing the slideshow when the user places their mouse in the container; resuming the slideshow when the use mouses out.

Obviously our MooTools JavaScript code is going to change quite a bit so be prepared to (mostly) restructure the previous post's JavaScript code.

The HTML

<div id="slideshow-container">
	<img src="slideshow/cricci1.jpg" alt="Christina Ricci" />
	<img src="slideshow/cricci2.jpg" alt="Christina Ricci" />
	<img src="slideshow/cricci3.jpg" alt="Christina Ricci" />
	<img src="slideshow/cricci4.jpg" alt="Christina Ricci" />
	<img src="slideshow/cricci5.jpg" alt="Christina Ricci" />
</div>

Nothing has changed from the previous post. Just images of Christina Ricci which will set your heart ablaze.

The CSS

#slideshow-container	{ width:512px; height:384px; position:relative; }
#slideshow-container img { width:512px; height:384px; display:block; position:absolute; top:0; left:0; z-index:1; }
.toc					{ position:absolute; left:0; bottom:20px; z-index:2; display:block; width:20px; background:#6D84B4; color:#fff; text-align:center; padding:3px; text-decoration:none; }
.toc-active				{ background:#fff; color:#6D84B4; }
#next					{ position:absolute; bottom:20px; right:20px; z-index:2; display:block; width:20px; background:#6D84B4; color:#fff; text-align:center; padding:3px; text-decoration:none; }
#previous				{ position:absolute; bottom:20px; right:60px; z-index:2; display:block; width:20px; background:#6D84B4; color:#fff; text-align:center; padding:3px; text-decoration:none; }

We've added the toc and toc-active CSS classes. The toc-classed items will be absolutely position at the bottom of the container. We'll calculate the left value of each item with MooTools as we don't want them to overlap. We've also defined CSS rules for the Next and Previous buttons we will generate. Feel free to style the TOC items and buttons any way you'd like.

The MooTools JavaScript

window.addEvent('domready',function() {
	/* settings */
	var showDuration = 3000;
	var container = $('slideshow-container');
	var images = container.getElements('img');
	var currentIndex = 0;
	var interval;
	var toc = [];
	var tocWidth = 20;
	var tocActive = 'toc-active';
	
	/* new: starts the show */
	var start = function() { interval = show.periodical(showDuration); };
	var stop = function() { $clear(interval); };
	/* worker */
	var show = function(to) {
		images[currentIndex].fade('out');
		toc[currentIndex].removeClass(tocActive);
		images[currentIndex = ($defined(to) ? to : (currentIndex < images.length - 1 ? currentIndex+1 : 0))].fade('in');
		toc[currentIndex].addClass(tocActive);
	};
	
	/* new: control: table of contents */
	images.each(function(img,i){
		toc.push(new Element('a',{
			text: i+1,
			href: '#',
			'class': 'toc' + (i == 0 ? ' ' + tocActive : ''),
			events: {
				click: function(e) {
					if(e) e.stop();
					stop();
					show(i);
				}
			},
			styles: {
				left: ((i + 1) * (tocWidth + 10))
			}
		}).inject(container));
		if(i > 0) { img.set('opacity',0); }
	});
	
	/* new: control: next and previous */
	var next = new Element('a',{
		href: '#',
		id: 'next',
		text: '>>',
		events: {
			click: function(e) {
				if(e) e.stop();
				stop(); show();
			}
		}
	}).inject(container);
	var previous = new Element('a',{
		href: '#',
		id: 'previous',
		text: '<<',
		events: {
			click: function(e) {
				if(e) e.stop();
				stop(); show(currentIndex != 0 ? currentIndex -1 : images.length-1);
			}
		}
	}).inject(container);
	
	/* new: control: start/stop on mouseover/mouseout */
	container.addEvents({
		mouseenter: function() { stop(); },
		mouseleave: function() { start(); }
	});
	
	/* start once the page is finished loading */
	window.addEvent('load',function(){
		start();
	});
});

I told you it changed quite a bit, didn't I? Here's what I added:

• I created start, stop, and show functions which do exactly as they're named.
• Injected table of contents links based upon the number of elements in the slideshow. Each TOC link has a click event which skips to the corresponding slide.
• Created next and previous links to move forward and backward in the show.
• Added mouseenter and mouseleave events to stop and start the show when the user triggers each event.

The added code blocks were very simple to add; taking them one at a time kept creating these enhancements quick.

What's Next?

The next step will be transforming the above MooTools JavaScript code into a class. Class-ifying the code will make it cleaner and more organized.

Discussion

The Bottom Line