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. Hi. I included this plugin into a joomla 3 page as described above. In Firefox i can see and use it. But in google chrome, nothing is displayed :(
    I could edit the css, if there was any. Could you please rewrite this plugin to use an extra CSS file and use some classes, so ciritical styling-bugs can be corrected more easy?

    Here’s the page, where it does not work: https://mvg-mobil-blog.de/login.html

  2. I’m having difficulties putting a group of these side by side horizontally. Is this possible? What would the div structure look like?

  3. What i do not understood is if truth be told how you’re no longer actually much more
    neatly-preferred than you may be now. You’re very intelligent.

    You know therefore considerably relating to this topic, made me
    personally imagine it from so many varied angles.
    Its like men and women are not interested until it’s
    something to accomplish with Girl gaga! Your personal stuffs excellent.

    All the time take care of it up!

  4. Nice work. A friend found your widget used on the UVa (University of Virginia) site and asked me if I could implement it for him. Helpful docs and I was up and running in about 10 minutes. Quite cool.

    I am just starting to setup a proper site for him, but here is a quick mockup of the before/after tool in use: http://sdrprep.net/bridge/view13.html (should be interegrated into WordPress and on a different url soon…)
    Thanks!

    Sean

  5. Hi,
    We’ve been using this code on our home page, and it works great, but there’s one issue: on mobile devices, the two images appear on the page with the second one vertically below the first for a moment – sometimes many moments, as in half a second or more. Any advice about how to make it behave better on mobile devices?

    Thanks!
    Alan

    1. You could hide your images with CSS (display:none) then using jQuery and the window load event, show the images. That would prevent the flash of unstyled content.

      1. Thank you! Excellent idea. It worked to an extent. Now instead of seeing the two images momentarily, one sees an empty box momentarily. But I think that’s easier to live with than the double image.

  6. I noticed i had to rename the handle images handle.gifrt-small.png ect. and handle.gifhandle.gif

    in the package that you can download the names are different, but the links of the imgs point to the file names mentioned above.

  7. It’s also appropriate for the united states Food and Drug Administration (FDA)
    to find yourself in business of managing e-cigarettes to ensure
    they don’t have a lot of poisonous and unnecessary chemical compounds in them and also
    to establish accountable processes and criteria when it comes to
    production and advertising of this products.
    As far as the average e-cig individual is concerned, e
    cigarettes are really just consists of 3 main components.
    Vaping beginner kits begin at about $30.

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>