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

Create a Simple Slideshow Using MooTools, Part IV: Thumbnails and Captions

My "Create a Simple Slideshow Using MooTools" series has been hugely successful. The first step was laying the groundwork for the slideshow, the second step was adding controls and events to the slideshow, and the third step was recoding the slideshow into a sexy class. This fourth slideshow tutorial will add thumbnail previews and captions to the slideshow.

No Class? WTF!?

I've chosen to revert back to the "inline" code from the second tutorial. Why? I'm going a little bit off of the reservation with this one. I think classes are important to use when you want a more generic slideshow; this one will be a bit more customized. That isn't to say, however, that I wont be creating another class in the future.

The HTML

Isn't it nice that our base HTML code hasn't changed since the first tutorial? :)

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; }
#slideshow-container-controls { margin:10px 0 0 0; }
	#slideshow-container-controls img { cursor:pointer; width:100px; height:75px; border:1px solid #ccc; float:left; margin:0 1px 0 0; }
#slideshow-container-caption  { height:70px; position:absolute; bottom:0; left:0; right:0; background:#000; z-index:10; overflow:hidden; }
	* html #slideshow-container-caption { width:100%; }
	#slideshow-container-caption h3 { font-size:24px; font-weight:bold; color:#fff; padding:10px 10px 3px 10px; }
	#slideshow-container-caption p	{ color:#eee; font-size:11px; padding:0 10px 10px 10px; }
.toc-active				{ border-color:#000; }

We've added a bit of CSS for the forthcoming controls/thumbnails and the caption elements. The caption will have a black background with light text. The thumbnails will be very small, floated next to each other, with fixed dimensions.

The MooTools JavaScript

window.addEvent('domready',function() {
	/* settings */
	var showDuration = 5000;
	var container = $('slideshow-container');
	var images = container.getElements('img');
	var currentIndex = 0;
	var interval;
	var toc = [];
	var tocActive = 'toc-active';
	var thumbOpacity = 0.7;
	
	/* new: create caption area */
	var captionDIV = new Element('div',{
		id: 'slideshow-container-caption',
		styles: {
			//display:none,
			opacity: thumbOpacity
		}
	}).inject(container);
	var captionHeight = captionDIV.getSize().y;
	captionDIV.setStyle('height',0);
	
	/* 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).fade(thumbOpacity);
		images[currentIndex = ($defined(to) ? to : (currentIndex < images.length - 1 ? currentIndex+1 : 0))].fade('in');
		toc[currentIndex].addClass(tocActive).fade(1);
		captionDIV.set('tween',{
			onComplete: function() {
				captionDIV.set('tween',{
					onComplete: $empty
				}).tween('height',captionHeight);
				/* parse caption */
				var title = '';
				var captionText = '';
				if(images[currentIndex].get('alt')) {
					cap = images[currentIndex].get('alt').split('::');
					title = cap[0];
					captionText = cap[1];
					captionDIV.set('html','
' + title + '
' + (captionText ? '
' + captionText + '
' : ''));
				}
			}
		}).tween('height',0);
	};
	
	/* new: create preview area */
	var preview = new Element('div',{
		id: 'slideshow-container-controls'
	}).inject(container,'after');
	
	/* new: control: table of contents */
	images.each(function(img,i){
		/* add to table of contents */
		toc.push(new Element('img',{
			src: img.get('src'),
			title: img.get('alt'),
			styles: {
				opacity: thumbOpacity
			},
			events: {
				click: function(e) {
					if(e) e.stop();
					stop();
					show(i);
					start();
				},
				mouseenter: function() {
					this.fade(1);
				},
				mouseleave: function() {
					if(!this.hasClass(tocActive)) this.fade(thumbOpacity);
				}
			}	
		}).inject(preview));
		if(i > 0) { img.set('opacity',0); }
		
	});
	
	/* 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(){ show(0); start(); });
});

The first step is creating the caption container within the main image container. We measure the height of the caption container and hide it right away to prevent it from being seen. The next step is adding a few chained tweens within the show method that parses the image's alt attribute, sets the HTML within the caption container, and slides it up and down. I set the HTML of the caption container instead of using MooTools to create new H3 and P elements because (a) setting the HTML is faster and (b) we have no plan to do anything with each element individually.

A preview container is also created to hold the thumbnails. As we cycle through the large images, we create IMG elements with a fixed size (from the CSS above) that will act as thumbnail navigation for the slideshow. As an image receives focus, it's border and opacity changes to show focus. Awesome!

Do you like this version better than the previous? I certainly do. Look forward to a class version soon. Have any improvement ideas? Share them!

Discussion

The Bottom Line