WebAppers

/ best free open source web resources /

Shopify

Show a Before and After Picture with a Slider in jQuery

Posted · Category: CC License, Tools

New York Times online 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 found this very useful and immediately created Before/After jQuery Plugin for the same purpose. 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.

before-after-jquery

Requirements: jQuery Framework
Demo: http://www.catchmyfame.com/jquery/demo/8/
License: Creative Commons License

5 Comments
  • David

    Nice. Got a link to the NY Times article?

  • Ray Cheung
  • Anonymous

    Hey Ray, where do you find some of this stuff? I’m not complaining but some of the stuff you find is simply remarkable and amazing.

    Keep up the good work mate. :)

  • cMex

    can i use it on my customer’s page?
    what is this bsd license
    it must to be a lawyer to understand it

  • i420bdawg

    Ray is there any way to use this along with an image gallery/slider plugin so that I could have a slideshow type deal of before and after slider images?

Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons