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.

506 thoughts on “jQuery Before/After Plugin”

  1. Since 3 days searching internet . Has anyone try to used this plugin with dynamic map content (leaflet or openlayers) . Any suggestion ?

  2. I’m having trouble putting two of these on the same page. It does some funky thing where it morphs the two and ruins it. i dont know whats wrong otherwise i’d describe it better

      1. I don’t have a physical website yet. I’m working on the pages before i publish it. I dont really know what’s wrong, it just ruins it when i put two of the same b/a html codes on the same page

  3. Hi, I think these functions are fantastic. Just what I have been looking for.
    Now I have to prepare some old and new pictures of my house so I can show my “handywork” on the house. Anybody know some programs for “matching” pictures for this plugin?
    I guess I need to cut the pictures so they get same size and maybe also change size a little bit as they are not always taken from the same spot.

  4. Been trying to get this working on my website, but for some reason it’s not showing the “after” image. The “before shows up, with the slider handle, and the ability to slide it, but just reveals a blank image. Thoughts?
    Thanks for your help!

  5. Absolutely wonderful plugin!!!

    Please, how can I make to use it in vertical? I need to slide an image up-down…

    Thanks!

    Davide

  6. Is it possible to re-size the handle in the middle. I tried making the image bigger but it is being constrained by a size somewhere that I cannot find.

    Any help would be great…

    thanks,

  7. This is brilliant, I’d been searching for a while but wasn’t sure what the plugin (if one existed) would be called. Before and After makes a lot of sense.

    How would one go about having the slider slide based on mouse position, without requiring a click / drag? So the slider would slide on mouseover of the image(s)? I’m thinking this would be a great feature for a header section of a homepage, and cause some delight to the user when they notice the transition between old and new on mouseover.

    Thanks.

    1. Thanks. One early version I tested had this functionality but people really disliked it because they felt they didn’t have as much control as they did when dragging. You can hack the plugin to do this however, basically replacing the drag function with mouseovers.

  8. Hi, thanks for making this plugin, it is just what I need. I have a page setup that has two instances of your plugin one for mobile and one for desktop. I have a problem, when I load it up on mobile, a weird green streak appears on the images. This looks like an error on the handle.gif. I was wondering if you had any ideas to fix it?
    Link: danielcreese.co.uk/project_amethyst.html

    Thanks,
    Dan.

      1. Really?, I have it running, (I have just updated the source code, try it now). I have now removed the reference to handle.gif, however the seperator is not in the correct place. Also the size of BeforeAfter() is set at load time, is there a way to change it on resize?

        Thanks,
        Dan.

  9. Dear Admin,

    I have made picture frame and it is working fine…..Thank you so much for this outstanding plugins. I would like to know, how i can fit picture on my page side by side (Right and Left) its only showing top to bottom & second to change the handle color…..pls reply

    Reg
    Zeeshan

  10. Not sure if this has been asked before, but it is possible to have the option of slider moving up and down instead of left and right? Thanks!

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>