Show before and after images effect JQuery plugin

New York Times online and they had an article which showed a road in Brooklyn that had been reconstructed to make it safer and more pleasing to the eye. To show the difference in the reconstruction project, they showed a before and after picture using Flash that let the visitor drag a slider over the images, which were sandwiched with one on top of the other, so that you could easily see how dramatic the changes were. Catchmyfame immediately thought that this could be done in JavaScript using jQuery, so he set out to do it.

The possibilities for this plugin are endless. Doctors can have before and after images of patients, Photoshop users can show the before and after differences between images, remodelers can show the before and after images of projects and on and on. This plugin weighs in at only 7K and can be used multiple times on a page.

Features
  • Slick effect, no Flash needed
  • It’s just 7K
  • Reusable on multiple containers
  • Degradable. If the visitor doesn’t have JavaScript they will still see both images.

Requirements: jQuery Framework
Demo: http://www.catchmyfame.com/2009/06/25/jquery-beforeafter-plugin/
License: Creative Commons License

Incoming search terms for the article:

Related Posts

How To Get The Last Tweet Using jQuery

TopUp Lightbox

Add An Attractive Loading Page Effect Using jQuery

jdPicker- The Ultimate jQuery Date Picker

1 Comment

  1. i love how compact it is..that’s the main problem with flash, it’s so bulky