jQuery Scrub

Here's a little jQuery plugin to implement iPhoto like thumbnail scrubbing. It can be implemented with a little CSS and some surprisingly simple jQuery.

Step 1 - HTML

Our Scrubber HTML consists of a container div and x number of child images.

<div class="scrubber">
	<img src="image_1.jpg" />
	<img src="image_2.jpg" />
	<img src="image_3.jpg" />
	<img src="image_4.jpg" />
</div>

Step 2 - CSS

The basic CSS will force the scrubber container to the same height as the child images. We also need to position each image absolutely at the top left of the container. This will also help the thumbnail work with javascript disabled, the last image will appear on the top.

.scrubber {
	height: 75px;
	position: relative;
	width: 75px;
}
.scrubber img {
	position: absolute;
	top:0;
	left: 0;
	z-index: 0;
}

Step 3 - jQuery

To implement this plugin we need to complete the following steps

Calculate x-axis trigger distance

The width of the scrubber container divided by the number of images will give us the distance in pixels the mouse has to move to trigger the next photo.

// get number of children
var children = $(".scrubber").children().length;

// get width of scrubber
var width = $(".scrubber").width();

// get x axis trigger
var trigger = width/children;

Bind Mouse Over Event

The mousemove event will call the scrubber function each time the mouse moves over our scrubber wrapper.

$("#scrubber")
	.mousemove(function(e){
		// get x mouse co-ord
		var x = e.pageX - $(this).offset().left;
		
		// get the index of image to display on top
		var index = Math.ceil(x/trigger);
		
		// move all other children to back
		$(this)
			.find(':not(:nth-child('+index+'))')
				.css('z-index', 0);					
		
		// move selected child to front
		$(this)
			.find(':nth-child('+index+')')
				.css('z-index', 1);
	});

Step 4 - Profit

Check out the demo below. Each thumbnail contains a different number of images.
Download Plugin: jquery.scrub.js