jQuery Before/After Plugin

Not long ago the New York Times 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.

Being used by:

and many more…

Download

Download jquery.beforeafter.zip (version 1.4  – September 20, 2011)

What’s So Great About this Plugin?

  • Slick effect, no Flash needed
  • It’s just 7 Kb (5 Kb compressed)
  • Reusable on multiple containers
  • Degradable. If the visitor doesn’t have JavaScript they will still see both images.
  • Did we mention it’s slick?

How to Use

First, your before and after images must be the same size.  Both images must exist 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.

The plugin requires jQuery (of course) and the draggable component of jQueryUI. Both files are bundled with the plugin however you can point to other copies if you prefer (e.g. jquery on Google and jqueryui on Google). Upload the plugin files on your site and link to them:

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="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.

Tablets/Mobile

The Before/After plugin can easily be used on mobile devices by adding the jQuery Touch Punch plugin. You can grab the latest copy from github (recommended) or here.

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/’)
  • introPosition – where the draggable separator should appear when the plugin loads as a fraction of the overall width (default .5). For example, .25 would have the draggable separator appear 1/4th of the way on the left of the image.
  • beforeLinkText – used with the showFullLinks option, this is the text used for the before image link (default  ‘Show only before’)
  • afterLinkText – used with the showFullLinks option, this is the text used for the after image link (default  ‘Show only after’)
  • cursor – the CSS style of the cursor when pointing to the drag handle (default ‘pointer’)
  • clickSpeed – the speed (in milliseconds) for a click animation to complete (default 600)
  • linkDisplaySpeed- the speed (in milliseconds) for a link animation to complete (default 200)
  • dividerColor – the CSS hex color of the divider bar (default ‘#888′)
  • enableKeyboard – enable keyboard control using the left and right arrowd (default false)
  • keypressAmount – if enableKeyboard is true, the number of pixels to move the divider on each keypress (default 20)
  • onReady – a callback function that is triggered when the plugin is ready to be used

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.

167 thoughts on “jQuery Before/After Plugin”

  1. When I use 1.7, I get an error that beforeAfter is not a function! Any idea what I am doing wrong?

    $(function(){
    $(‘#container’).beforeAfter({
    animateIntro:true,
    imagePath:’images/’,
    introDuration : 600,
    introPosition : .25,
    showFullLinks : true,
    beforeLinkText: ‘Show before image’,
    afterLinkText: ‘Show after image’,
    cursor: ‘e-resize’,
    enableKeyboard: true,
    dividerColor: ‘#070′
    });
    });

  2. Hello! FirstlyI have to say, that you did a great job! I’d like to know if it would be possible to make sme effect without bar, animation acting on mouse over, in both directions (x and y axis). And second: how many pictures needed for this js animation? Only 2 or more?

  3. I have a problem with Firefox to show me the effect offline. With IE it’s fine, while Firefox show me only the handle icon and the text “Show only before – Show only after”. What’s going on? Thank you.
    Andrea

      1. You are right, I did something wrong pasting the code into the page and Firefox didn’t like it, plus my laptop went crazy and I had to turn it off… now everything it’s fine :)
        Thank you very much for your help, regards.
        Andrea

  4. Firstly, thanks for putting this out there. My question is: Is there a trick to getting this to work in a lightbox like prettyPhoto or Fancybox?
    Thanks
    Marty

  5. Do you have any demos of this plugin using before and after pictures that don’t perfectly line up?(non programmer here) The majority of my uses would not match perfectly(i.e. different angle, possibly different lighting, etc) I’d be interested in seeing if the slider bar still creates a similar effect with pictures that aren’t a perfect match. Is that possible?

  6. Hey, I’m attempting to use the plugin and, even after setting the width and height it’s still not showing on webkit browsers. Is there any particular order in which this is suppose to be done? I followed the instructions and had no issue with it showing up in other browsers but Safari and Chrome (even after setting the height) still do not show up.

  7. I want to use multiple instances of beforeafter in royalslider, it works in the first instance, but the second instance stacks the images, above and below each other. Is there a way to use multiple instances within a horizontal slider?

  8. For some reason the plugin is conflicting & not working with bootstrap.
    Someone resolved that issue?

    1. Hi Oren,

      I’m having the same problem, i found a conflict with the file boostrap.css (with bootstrap-responsive.css works fine) on img css. So i commented this lines on line 101 [bootstrap.css]
      (width, height and max-width).

      img {
      /*width: auto\9;
      height: auto;
      max-width: 100%;*/
      vertical-align: middle;
      border: 0;
      -ms-interpolation-mode: bicubic;
      }

      It seems to me that worked well.
      I hope it helps.

      Regards!

  9. This is awesome! We are using it to power a project showing the before and after of the spanish housing bubble. It looks pretty neat thanks to you. You can see in our web you´ve been credited.

    Excellent work!

  10. Love the plugin, if I’d only get it to work. I’m trying to include it in a WP site, and I think I have all the parts, but it just doesn’t behave as expected. Here’s the link: http://andybitterer.com/sandbox/before-after-test/
    I got it working half-way in Firefox, but instead of a rollover slider it kinda scales the overlay picture. The middle handle is also unexpectedly tiny. And in Chrome or Safari the plugin doesn’t even show any image. What am I missing?
    Thanks.

  11. I have a problem on my wordpress site: the ‘before’ image is scaling to the top-left corner, like a slide effect, so it keeps the ascpect ratio according the width, not cropping. In the css, the width is changing correctly (also the divider position), the height is fix and ok, but still. What am I missing? Is there something in the css which couse this? Any idea? Thanks!

    1. Zoltan, I had posted a description of the same effect only about a week ago (two posts up), but haven’t received any response yet. I still haven’t figured out why the plugin isn’t working as described. I’m assuming it conflicts with something in WordPress itself or the WordPress theme (from ElegantThemes) that I’m using on the site. I hope that we can get this resolved, as the plugin would really be useful.

      1. I can’t reply about the WordPress plugin since I didn’t create it. Someone else took the Before/After Plugin and modified it to work in WordPress so you might want to contact them.

      2. The WordPress plugin, as I saw, just an interface for this great function, with some tweak. I’ve replaced the plugin files with this download (jquery.beforeafter.zip v1.4), and according to the page source, every js files are in place, the div container, id and images src are ok, and the beforeAfter() function is working… just not as it should be :( My only guess is the css (because this beforeAfter is working on WordPress themes), but I don’t know which part is resposible for the bad behavior.

  12. Great plugin. I’m just having one small problem. For some reason the after image is being placed about 10 pixels lower than the before picture and the bottom is being cutoff of the after picture. You can view the images I am using on my website at http://www.leadon.ca/services.

    Your help with resolving this problem would be greatly appreciated.

  13. I didn’t dig through your code to find the problem, but specifying top:0 for the divs that contain the images fixed it for me. In cases like this it’s best to start with a blank page and then add in the rest of your content piece by piece to see that CSS or JavaScript is causing the issue. Obviously check the console for errors along the way.

  14. Hi there, may be a silly simple question but i cant see it in the documentation. How do i disable the click so that the user if forced to drag rather than click the div for it to move as well?

    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>

A web developer's journal