JZ ImageTwins


The MooTools plug-in manipulates two images (e.g. Before image / After image). It places both images into the same position and adds a dividing line in the middle. By moving the dividing line, web users can easily compare the two images.

Demo 1: Lamborghini Aventador (White and Orange)

Demo 2: Tohoku (Japan) earthquake on 2011 March 11 (Before/After satellite images)

Code Sample

Define an UL element with two LI child elements. Then put your IMG elements inside the LI elememnts. The alt attributes detemine the texts to be displayed under the images.
Include the MooTools Core and MooTools More javascript files. Add the following Javascript code within window.onload() or window.addEvent('domready', function(){...}). You can either provide a HTML tag, a CSS class name, or a DOM Id as the selector.
	new jzImageTwins('.cssClass'); // select by CSS class
	new jzImageTwins('domId'); // select by DOM Id
	new jzImageTwins('ul'); // select by HTML tag


MIT License


MooTools Core 1.3 (or above) and MooTools More, pls visit the official MooTools site for further details


Click here to download 1.0