Feed on
Posts
Comments

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.

499 Responses to “jQuery Before/After Plugin”

  1. Vipin Sahu says:

    is it working in jquery 1.5 ?

  2. Aaron says:

    I’m having problems getting the handle and left/right png images to show up. I didn’t change anything in the code, and I didn’t move them. I see someone mentioned deleting ” ‘+o.imagePath+’ ” but that doesn’t make any difference either. It has to be something to do with the path of the image, can anyone help? I’ve even tried to put a direct link in there….

  3. Carlos duarte says:

    Oh, this tool is great. I’m only having one trouble: the tiny images for handle.gif, lt-small and rt-small.png are not displaying properly. Thanks!!!

    • Peter Q says:

      Hi Carlos,
      Did you ever solve the handle.gif, lt-small and rt-small.png not displaying properly? Am having the same issue. Thanks

      • Ivan says:

        Hi. Just change “/js/beforeAfter/” to “./js/” (line 22 of jquery.beforeafter.js) to solve this issue, assuming you have the “js” folder in the same folder of the html file. Attention to the dot: “./js/” instead of “/js/”

      • Michelle says:

        Great plugin, exactly what I’m looking for. I’m still having issues with the handle displaying, though I’ve tried every suggestion offered here. As of now I have everything in one folder my js, HTML and images. Other than that it works perfectly just no handle image.

  4. Horn Gabor says:

    Would it be possible to make the animation completely automatic, even without the drag component? I’d just like that it would perdiodically move from “before” to “after”, wait a bit, move back to before, rinse and repeat. Any suggestions please how to do it? I guess similar to thew animateIntro part it could be done hopefully without too much work.

  5. nikmik says:

    hi.
    thanx for the awesome tutorial!really :) . . . but :D ( there’s always a but i guess :) )
    i’m using drupal and added the before.after.js in my theme and everything seems to work ok except the the dragable effect the links ‘show only the before’ or ‘show only the after’ works fine the images are loaded to i used this code in order to load correct ( based to my relevant
    path ofcourse )

    $(function(){
    $('#beforeafter').beforeAfter({
    imagePath:'ba/'
    });
    });

    but when i go to firefox’s error console i get this error

    Error: $("#dragwrapper" + randID).draggable is not a function
    Code: http://localhost/skia/sites/default/files/js/js_a871d7a3c2a74e3c88406cc38285ea6c.js
    Line: 3308

    As far as i know i’ve not made any other customizations expect the image path , do you know what this could be ?
    thanx!

  6. Yolanda says:

    thanx for sharing this nice plugin!
    will use if on my photo site.

  7. Matt says:

    Great. Does this work on an iPad? I’m working remote and don’t have one in front of me today. It seems that is should. If not, how hard would it be to make it work?

    Thanks!

  8. J says:

    Hi, I love this thing. I built one in Flash awhile back but now I’m being forced to migrate to something non-Flash and this is exactly what I need.

    However, I noticed that when one clicks and drags rapidly sometimes the button/divider bar doesn’t line up with the image devision. Can you tell me why this is happening? Thanks again for this!

    -jonathan

  9. Gavin says:

    I would like to have the before and after animate back and forth prefeably with a pause in between. Can you help?

  10. rdar says:

    Hey – this is *awesome*. I was wondering if you would be interested in modifying the code to allow clicking in the container to follow a “story” link – so, I would wrap the images in an a href tag, and then, if a user clicks on the images I could load a page describing the before/after image in detail. Thank you for the post in any event!

  11. Ma'moun says:

    It doesn’t seem that I’m able to use a relative path for the handle image. I’m trying:
    imagePath : '../images/',
    but the two dots are being printed as they are while page render:
    src="../images/handle.gif"

    Am I missing something?

    • moli says:

      To solve the missing images problem:

      Go to this file: beforeafter/js/jquery.beforeafter-1.3.js (or the minified version).

      Under the var defaults (at the beginning of the file) where you see imagePath :…the path that should be there MUST be a *relative path* to the image files as if you were on the *HTML page* where you’re applying the plugin… it should NOT be relative to the beforeafter/js/jquery.beforeafter-1.3.js, as I was thinking.

      In other words, how you linked this file: “beforeafter-1.3.js” in the head of the HTML page should be the path you should use for imagePath :

      For example:
      If this is my HTML document,
      <head>
      <script type=”text/javascript” src=”../../js/beforeafter/js/jquery.beforeafter-1.3.js”></script>
      </head>

      the beferafter-1.3.js should read as follows:
      var defaults =
      {
      animateIntro : false,
      introDelay : 1000,
      introDuration : 1000,
      introPosition : .5,
      showFullLinks : true,
      beforeLinkText: ‘Show only before’,
      afterLinkText: ‘Show only after’,
      imagePath : ‘../../js/beforeafter/js/’,
      cursor: ‘pointer’,
      clickSpeed: 600,
      linkDisplaySpeed: 200,
      dividerColor: ‘#888′,
      onReady: function(){}
      };

      Hope this helped!

  12. Cases says:

    That’s really cool. I had never seen this type of plugin before. I’ve already got 5 uses for it with my current sites. Its really an amazing idea. THANKS a bunch for sharing it with us.

  13. Wow, great plugin.

    Im thinking about implementing it on my site as well!

  14. tim says:

    Nice Work! Thanks!

  15. pmole says:

    I can think of at least a dozen ways to use this. Too bad your license wont let ity be used on a commercial site! Wish I could give you the credit

  16. moli says:

    If I use this plugin on a number of images, is there a way to make the before and after links say different things for each usage of the plugin?

    • moli says:

      Figured it out! I gave it a new id for the div tag and configured it with the options beforeLinkText and afterLinkText.

  17. Mike says:

    Sweet little script……….easily implemented wvwn with my mininimal skills, Thanks so much.

    How would I change the text that pops up when hovering over the handle.gif.
    I have a need to have it read something like ” Drag left or right to show blueprint vs finished product”

    Thanks, Mike

  18. stephanie says:

    how can i add this to blogger? look s awesome if I could just figure out how to add this to blogger.com?

  19. puma says:

    can i use this plugin on mouse hover? For example i have a link and when i click on that link this before and after shows up? Could someone help me on this?

  20. Phil says:

    Hi .. Sorry I`m totally new in this coding language..

    How I can setup my wp-blog page that the before after plugin works..

    I`ve installed the plugin from the wp search from Hemant Nandrajog
    But how I can setup this jquery thing ?! Sorry for this noob question !

    Greez

  21. 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. =)

  22. Promovis says:

    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

  23. Adam says:

    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

    • admin says:

      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.

  24. Terry Upton says:

    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….

  25. canaan77 says:

    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:).

Trackbacks/Pingbacks

  1. […] there are a number of paid plugins and scripts out there that will let you achieve this effect, some of them are not made to be […]

Leave a Reply

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