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" /> </div>
$(document).ready(function(){ $('.compare').compare(); });
Here is the plugin code:
(function($){ $.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: $(one).find('img').hide(); first.show(); $(one).mouseover(function(){ first.hide(); other.show(); }).mouseout(function(){ other.hide(); first.show(); }); }); } })(jQuery);