jQuery Image Comparison

09 Sep 2010

I just created a silly jQuery plugin to compare two images for my HDR comparison post. All it does is toggle which image is visible in a container on mouseover/mouseout. It's not really the most useful behavior imagined - I guess I wrote it more of a showcase of how easy it is to author jQuery plugins. You can see a working demonstration here.

To use it just put two images in a container and call compare() on the selector:

  <div class="compare">               
    <img src="/images/photos/IMG_0805.JPG" alt="Regular" />
    <img src="/images/photos/IMG_0806.JPG" alt="HDR" />

Here is the plugin code:

  	$.fn.compare = function(options)
  		$(this).each(function(index, one){
  			var first = $(one).find('img:first');
  			var other = $(one).find('img:last');

  			//Hide all but the first:



Download Code