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.

507 thoughts on “jQuery Before/After Plugin”

  1. @Jim Mooney
    Well since this doesn’t happen in the demos, and does happen on your site, my first guess would be some conflict between the three frameworks you’re using simultaneously. How about trying a plain vanilla test on your site without dojo or mootools?

    1. I removed dojo. Unfortunately I can’t remove mootools since Joomla unwisely made it impossible to do that by using it in the administrative back end. I’m going to try a hack on that but that, though. Joomla has a very old mootools 1.1 that is forcing everyone to migrate to jQuery. Still, jQuery is in noconflict mode, which I thought would let it work with mootools. Good point about the demos. I should have viewed them in IE first ;’) I’ll fiddle around and see if I can get it working now that I’m sure it works in IE.

  2. I really like this plugin and it works great. I wanted to try to take it to another level and when a user clicks on a thumbnail I’m going to put below the Before and After frame, it swaps out the pictures and reloads the so I get the same introAnimation and introDuration to run on each reload. Is there any advice you can give me to get that to work?

    1. Did you ever get the thumbnail/gallery idea working with before&after? If you did that would be great! I need exactly that for a project!

  3. I think this is great, but I’m also after something similar to Jeremy (29th Jan) – a row of thumbnails to be clicked that then swap the before+after images for new ones (essentially a gallery with this bolted over it).
    Any help be great thanks! :)

  4. Having a problem with using this within a WordPress page. I got the first set to work, but every set after that does not work, even though, I copied and pasted the code from the first set. Do I have specify unique ID’s for each container div? Are there any special rules I need to define in the js function? Any help would be greatly appreciated. Link to where I’m using it: http://www.adservices.net/devblog/before-after/

    1. Great job getting it running! How did you do it? I’m also having that problem with wordpress. Did you set up unique container IDs?

      1. Yes, unique container ID’s were the the key. What I didn’t realize the first go-round was that they all have to be declared in the head like this:

        $(function(){
        $('#container').beforeAfter({imagePath:'/jquery/'});
        $('#container1').beforeAfter({imagePath:'/jquery/'});
        $('#container2').beforeAfter({imagePath:'/jquery/'});
        $('#container3').beforeAfter({imagePath:'/jquery/'});
        $('#container4').beforeAfter({imagePath:'/jquery/'});
        $('#container5').beforeAfter({imagePath:'/jquery/'});
        $('#container6').beforeAfter({imagePath:'/jquery/'});
        });

        </code

    1. Hmmm, I just tested it in noConflict mode with mootools and it worked great.

      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.4/mootools.js"></script>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.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">
      $.noConflict();
      jQuery(document).ready(function($) {
      $('#container').beforeAfter({
      animateIntro:true,
      imagePath:'/js/'
      });
      });
      </script>

      I even ran mootools code after the above code which worked fine.

  5. i used before&after mixed with colorbox and i’m having an issue where when i manually drag the bar left and right… the view of the after moves about 150px to the left of the drag bar

    http://www.123ktp.com/home.php?request=services
    click on “Optimized Image Sample”

    I’ve tried editing the innerHeight and innerWidth being passed into the jQuery beforeandafter()

    i really don’t wanna tear apart the beforeandafter.js file, so if you know whats wrong… that would be fantastic

  6. Great plugin, thanks!

    Sugestions:
    1) toggle view buttom;
    2) add option to snap the drag bar to mouseover event. I can “simulate” this by mousedown on bar, move outside image, mouseup and return to image. Apparently I can queue the control over the all bars until I not click again in the image :P

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>