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. Genius!!! Perfect for what I was looking for.

  2. MSabene says:

    Hi,

    Great plugin!

    I need to keep the size of the jQuery-UI to a minimum. Would you be able to tell me which components are necessary so that I can build a custom file?

    Thanks!
    MSabene

  3. Pat OBrien says:

    Hi, I am having a hard time getting options to work. When I have the following code, I get nothing on screen. All my images are blank, so I am guessing I have bad code somewhere.

    $(function(){
    $(‘#container’).beforeAfter({
    animateIntro : true,
    introDelay : 2000,
    introDuration : 500,
    showFullLinks : false,
    });
    };

    • Pat OBrien says:

      Oh, and I had another thing too. For some reason the .gif files aren’t loading for the slider bar and left & right arrows. I just have the vertical bar …. Any thoughts there, too?

      Thanks

      • Pat OBrien says:

        I was able to figure this out.

        The images needed a ./js/beforeAfter in the script var section, that way I can put the js folder in a subdirectory.

        Also, the syntax had too many semi colons.

  4. Steve says:

    where do i extract and upload jquery.beforeafter.zip on my site?

    and can this be used in joomla?

  5. Zach Fine says:

    Hi y’all. With admin’s approval, I’ve added a few features to the code and have wrapped it up as a wordpress plugin. I just posted a long explanation of the changes and a download link at my blog.

    The alterations allow the use of an arbitrary number of beforeAfter containers per page, with user settings snarfed from html5 custom attributes in the container. I’ve also added “wipeto”, “beforetext”, and “aftertext” variables so one can set the start point of the control widget (where 0 is the image’s left edge and 100 is its right), and so one can specify the text used for the links below the container. These settings default to their original behavior. More information and an example container can be found in my blog post. I’d crosspost the info here, but it’s very long.

  6. Joe says:

    Honestly after looking at the code, things like this takes minutes to do in Flash.

  7. Thiago says:

    Sometimes the plugin loads without the before/after images
    does anybody know how I can fix it?

  8. admin, any suggestions of any other JQuery plugins I could integrate this with, to use the BeforeAfter with a gallery..? Thanks.

  9. MSabene says:

    Hi,

    With the latest update of jQuery (1.4.3) the slider in Before and After can’t be dragged anymore in Safari 5.0.2. Works fine in Firefox, though…

    Any suggestions?

    Thanks!
    MSabene

    • admin says:

      Seems to happen in Chrome too. I think I have a fix for this but I want to also see if I can streamline this a bit more while I’m looking at it. Thanks.

      • MSabene says:

        Thanks! I appreciate your quick response.

      • admin says:

        OK, the zip file has been updated and it should fine now in webkit. I’ve also updated the demos to run with jQuery 1.4.3 and the latest version of jQueryUI. I’ll add a new post a bit later.

  10. I.L. Watson says:

    Do you have any detailed instructions on how to install and create pages with this plug-in? I have uploaded the .zip to my site ftp, but that’s as far as I got. I’m still new to this wordpress plugin stuff so any help is appreciated.

  11. MSabene says:

    Great, thanks! I’ll update my files…

  12. Which file can I edit to reposition the “show only before/after” links. Thanks.

  13. Andrew says:

    Is there a way to turn this into a gallery that slides from one before/after set to the next?

    • Dan says:

      i would also be interested if i can use this plugin for more than one pairs of before/after pictures?
      thanks!

      • admin says:

        I thought someone earlier might have posted a way to do this but by default, no, there’s no option to have a gallery of before/afters. Could be a feature in a future version.

  14. @admin
    When centering your jQuery Before/After Plugin your slider position code does not compensate. It does not slide correctly in IE, FireFox, Chrome (all PC).
    I’ve tried adding some code to jquery.beforeafter “var PositionConflict = 211 + 256; /* 211 : can’t explain / 256 : column 1 width */” & ” var clickX = e.pageX – this.offsetLeft – PositionConflict;”, but it does not help.
    Can you fix this or can we not have your plugin centered..??

  15. BJ says:

    @David
    You new to CSS? Works fine if you center the container with margin: 0 auto. BTW you should try things before blaming others for simple problems. CMF’s plugins rock!

  16. Cool plungin! Thanks for sharing. I hope to see more from you.

  17. christy says:

    HI, thanks for the plugin.
    How would I add to default to the middle when mouseout?

  18. trouwringen says:

    Very Nice . I am going to use in my “trouwringen” site

  19. ashish says:

    Wow this one is amazing.

  20. nil says:

    nice!
    only one thing ..i want to change style of ‘Show only before’ and Show only after’. ….. how to change or wanna add my own css ( for fonts style). please help

  21. Luuk Lamers says:

    when using the latest version of jQuery, the click part does not work because of line ~123 in the file.
    it says var clickX = e.pageX - this.offsetLeft; which uses the deprecated offsetLeft.

    change it to var clickX = e.pageX - $(this).offset().left; using the offset() function
    to make it work.

  22. Marcus Tucker says:

    It’s a great plugin, with some lovely little touches. However it’s a shame that it doesn’t seem to be actively maintained and people in this thread have identified various issues which need to be addressed.

    Admin, please consider hosting this plugin on GitHub so that we can all collaborate on improving it by contributing fixes, raising issues, etc. Thanks in advance!

    • admin says:

      Please elaborate on what you believe needs to be fixed. It’s quite actively maintained, however I don’t have the time to respond to each and every request. Thanks.

  23. premKumar says:

    i am fresher in js ..I download jquery.beforeafter.zip.. my problem i dont know how to integrate.
    pls help me

  24. driver indir says:

    This is amazing. great!

Trackbacks/Pingbacks

  1. [...] jQuery Before/After Plugin [...]

  2. [...] Catch My Fame » jQuery Before/After Plugin [...]

  3. [...] can make comparison between 2 images – what was before and after. Online demo you can find here. 5. CSS EmoticonsThis plugin ! will turn any your text emotions into great looking smiles (pure CSS [...]

  4. [...] 使用此插件可以在两张图片之间进行比较。在线演示 [...]

  5. [...] York Times used to show the effects of the tsunami disaster in Japan. The before/after slider from Catch My Fame is an easy to set up, lightweight jQuery [...]

  6. [...] 使用此插件可以在两张图片之间进行比较。在线演示 [...]

  7. [...] 4. jQuery Before/After Plugin [...]

  8. [...] まずは、『jQuery Before/After Plugin』をダウンロードします。 [...]

  9. [...] jQuery before/after plugin: This is a tool I definitely want to use again the future. I won’t describe it in too much detail here; instead, I point you to the one time I used it to compare ward maps in Cedar Falls. But basically this is one of the best tools to visually compare before and after photos. And it’s simple to use. I swear. Check it out. Like this:LikeBe the first to like this post. [...]

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>