Mootools iPhoto-like Image Scrubber

I’m working on a project at the moment where I wanted the ability to flick through a set of images quickly without resorting to either a full-blown gallery or a rather passé Lightbox. Instead, I looked to iPhoto ‘08 for inspiration. I particularly liked the way that photos are automatically grouped into an icon which represents the photo set, and by moving your mouse from left to right over the set, iPhoto will skim through all of its photos.

So with this idea in mind, I set about creating a simple Mootools class to replicate iPhoto’s functionality.

This is what I came up with.

I have to say, that although I had used Mootools before – for some effects and DOM work – I hadn’t experimented with writing classes. Therefore, there may be obvious improvements to be made in my implementation.

The class is very simple. Its only arguments are a target element in to which the images will be injected, and a url to a data source which will provide some JSON in response to an XHR request. The JSON simply contains a list of objects which have link and a image attributes that are used to create the image and its containing anchor.

Full details of the class are probably better gleaned from reading the source and sample JSON rather then me reiterating the obvious.

The class has been tested on: Firefox 2, Safari 3, Webkit, Opera 9.5, and IE 6 & 7.

If anyone has any ideas for improvements, leave me a comment below.



  1. Louis Pontoise §

    That's a great class Andrew, congratz!