jQuery Before/After Plugin

About a month ago I was reading the 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. I immediately thought that this could be done in JavaScript using jQuery, so I set out to do it. Here’s the result:

Pretty slick no? 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.

Download

Go to the Before/After download page

What’s So Great About this Plugin?

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

How to Use

First, your before and after images must be the same size.  Each image must be inside its own div, and both of those within a containing div which must have an ID.  See this example.

<div id="container">
 <div><img alt="before" src="before.jpg" width="600" height="366" /></div>
 <div><img alt="after" src="after.jpg" width="600" height="366" /></div>
</div>

All images *MUST* have the width and height declared otherwise the plugin won’t work in Safari, Chrome, and any other webkit-based browsers.

To use the plugin you’ll need to have a copy of  jQuery and the jQuery UI, or point to jquery on Google and jqueryui on Google, and the plugin. Place the files on your site and link to them:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.beforeafter.js"></script>
<script type="text/javascript">
$(function(){
	$('#container').beforeAfter();
});
</script>

That’s it! You can apply the before/after plugin to any number of elements on a page.

Options

The following options are configurable:

  • animateIntro  – whether or not to have the drag bar start completely to the right of the container and gradually move by itself to the midpoint (default  false)
  • introDelay – if animateIntro is true, the number of milliseconds to wait before beginning the automatic drag bar move to the center of the image (default  1000)
  • introDuration – if animateIntro is true, the number of milliseconds it will take for the drag bar to go from the right side of the image to the middle of the image (default 1000)
  • showFullLinks – whether or not to display links below the image that a visitor can click on that will automatically show the full before or full after image (default true)
  • imagePath – the path (absolute or relative) to where you store the navigation images (default ‘/js/beforeAfter/’)

Options are added when calling the script:

$('#container').beforeAfter({
	animateIntro : true,
        introDelay : 2000,
        introDuration : 500,
        showFullLinks : false
});

Enjoy!

Demos

Note that the plugin uses several images which are kept in the same folder as the plugin. If you store the plugin in another folder on your server, update the path to these images. Please be sure to read the license before using.

504 thoughts on “jQuery Before/After Plugin”

  1. Sir. I have made a thing from your awesome thing… I credited you on the homepage. I put this together in like 4 hours last night.. etpost.com –

    I’ve been playin/tweakin with it all day. =)

  2. Super cool!
    But guess what? The same New York Times is using NOW your amazing jQuery Before/After Plugin: No snow in New York….
    Very good work, thank You for all the plugins & keep in touch (Isent U an email/admin regarding Infinite carousel 3.0 + fancybox). Cheers, Promovis

  3. Anyone having any trouble with this on Chrome?

    On some instances it sets the height and width of everything to 0px which means nothing is shown at all. Works fine on firefox though.

    Getting the following error in console: event.layerX and event.layerY are broken and deprecated in WebKit. They will be removed from the engine in the near future.

    Thanks

    1. That’s a Chrome/jQuery bug that has been fixed in the latest jQuery release. The jQuery used in the demos is version 1.6.1 so if you use jQuery 1.7 or newer you shouldn’t see those messages. The plugin should still work fine.

  4. I have changed the handle graphic and increased it’s size. However, when the images now load there is a gap between then after image adn the handle. How do I remove this so it meets the handle line? It actually works ok when you click on the hanlde and drag the after image meets the handle line, but when it laods or if you click there is a small gap….

  5. Hi guys!

    First I have to say I really like this plugin:). But I have a minor problem that I don’t know how to fix. I want to have a text that pops up when hovering over the handle.gif. I saw that Mike had this problem and he was recommended to search for the title code and change it (“Drag me left or right to see the before and after images”). I really can’t find this. In fact there is no text at all when I’m hovering over it. Hope you can help me:).

  6. Hi,
    How would I go about making the scroll move vertically instead of horizontally? My skills are very limited, so I would GREATLY appreciate any help with this!
    Thank you!

  7. Having trouble with before after javascript (not your fault though). Im trying to use it with cargo collective, and they already reference there own jquery 1.4.1 library. If I add a reference to the 1.6 library you’ve bundled, it breaks other aspects of the site.

    Is it possible for this to work referencing only jquery 1.4 elements?

    page in question:
    http://www.bigchaz.com/Mizuno-USA-Pitch

    thanks!

    1. That’s actually a jQuery UI issue. Their draggable function doesn’t work on touch devices. However, by adding the jQuery Touch/Punch plugin (https://github.com/furf/jquery-ui-touch-punch) after the Before/After plugin, it should work fine without any changes.

      I’ve been meaning to add this footnote to the docs for Before/After since I get a fair number of questions about this so hopefully this will remind me to do so.

  8. Hi,
    I’m looking for the same effect but without having to click, just by moving the mouse on the image. Anyone can help ? Can’t find what I’m looking for…

  9. I am recently working on your plugin. I am having problems with .png files. I made the background transparent and this script do not show the transparent background of the images. Do you have any suggestion please let me know.

  10. I am looking to implement this with multiple images in one instance, like an incrementing slider. Any advice?

  11. Thank you for the code. It’s exactly what I was looking for being inspired by similar expirience to yours. I used it to learn skills. Thanks again.

  12. Hi. Great plugin. Any desire to make it “responsive”? Hardcoded width/height breaks the code and I’m trying to integrate it with my design based on Twitter bootstrap theme. Resizing the window messes everything up.

    Cheers.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>