Feed on
Posts
Comments

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:

before-after-logos-newand 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.

156 Responses to “jQuery Before/After Plugin”

  1. Holy crap thanks! I just put this into a wordpress site for before and after photos for a client, and they loved it! Did a bit of css changes to the bar, which I believe it came out well!

  2. Matt says:

    So close, but…

    The before and the after don’t align correctly.
    The arrows and the handle do not display correctly.
    When you click “Show only before” the image extends outside the container on the right. And vice versa.

    Anyone have any insights on what might be happening?

    http://mattcreatetest.blogspot.com/2013/08/new-test-post.html

    • admin says:

      @Matt, well then it must be something you’re doing, and by looking at your page, my first guess would be your CSS. I’d begin by testing the plugin with none of your theme’s CSS and using a blank page. I see no JS errors when I load the page, but the W3 validator sees a whopping 135 errors (http://validator.w3.org/check?uri=http%3A%2F%2Fmattcreatetest.blogspot.com%2F2013%2F08%2Fnew-test-post.html&charset=%28detect+automatically%29&doctype=Inline&group=0) that you may want to work on fixing.

      • Matt says:

        An update for those attempting this on Blogger.

        The official blogger template “Travel” with accept this Before/After code without modification. For others, try this…

        Look for this…

        .post-body img {
        padding: 8px;
        background: $(image.background.color);
        border: 1px solid $(image.border.color);

        Replace with this…

        .post-body img {
        padding: 0px;

        No guarantee this will work with all templates, whether official Blogger templates or not.

        Also, apparently Blogger code doesn’t validate. No way, no how. Create a new Blogger site with an official Blogger template, and you already have 10+ errors. Add a test post, and it’s now 40+ errors.

  3. Matthew Trow says:

    Great script – searched high and low for another like it, considered writing my own, but instead modified this one – some quick hacks, time is tight!

    What I’d love to see is:
    1. Vertical split option – looking at the code, it should be relatively easy to accomplish.
    2. More options to style the ‘before/after’ links – ideally, they could be outside of the ‘container’, which is one thing I’ve modified.
    3. Auto-scroll when clicking ‘before/after’ in there’s an ‘overflow: hidden’ on a *parent* container to the before/after id.

    Point 3 – I’m using this to display before/after architectural plans. They require a reasonable width in order to get the ‘full effect’ – I’m at over 1800px on them. I’ve implemented an overflow:auto as a quick fix.

  4. t says:

    is there anyway to implement this with blogger?

  5. Georg says:

    Brilliant and it works perfectly… until I put the script in a page with a bootstrap framework (I’ve tried with Foundation too).

    Does anyone know how to make it compatible?

  6. epsilon says:

    hi, would you please to create the sample page to download and edit offline
    I dont know how can I use it
    the scripts must be added in or or ….
    thanks

  7. siewk says:

    may i know how we can add this plug in to blogspot ? thanks!

  8. alek says:

    First, awesome plugin – I bookmarked BeforeAfter a while ago, saying to myself “that’s pretty nifty” – note that nifty is better than “slick” ;-)

    Figured I’d want to use for something … and recently, I used it to overlay of Digital Globe Satellite Photograph and Google Maps of the Boulder Flooding near my house!

    So I’m trying to figure out some way to put a border around the image … but simple solutions such as use either CSS or just “border=20″ end up offsetting the image … my HTML/CSS Kung-Fu is not strong enough – any suggestions?

  9. Hi,
    Thanks munch for making this available, it’s exactly what I was looking for.
    Unfortunately, I have run into issues and I have no idea why I am seeing this behavior. I have made sure that both images are the same size, that the size is specified in the img declaration and have included everything accordingly. You can see the behavior of the slider in this url.

    I have included jequery 1.9.0 and jqueryUI of the same version. I examined the CSS using Chrome and I cannot find where the problem might be. As you can see, one of the images is scaled 1/4 the size it should be and the slider just overlays on top of the other image.

    Thanks in advance for your help!

  10. Ezekiel says:

    Hi, I really like this idea! But I’m JUST learning some HTML etc, and I can’t figure out how to make the whole thing center in the middle of the browser, by default it is on the left. How can I make it go to the middle?

    Thanks!

  11. Natalia says:

    Hello! Your plagin is the best.
    But I wasn’t able to install it in WordPress 3.7.
    Errors:
    Warning: Invalid argument supplied for foreach() in /home/oraclena/oraclena.com.ua/portfolio/wp-admin/includes/class-wp-upgrader.php on line 629
    629: foreach ( glob( $working_directory . ‘*.php’ ) as $file ) {
    $info = get_plugin_data($file, false, false);
    if ( !empty( $info['Name'] ) ) {
    $plugins_found = true;
    break;
    }
    Help me, please.
    Thanks.

  12. Leszek says:

    Hi,
    Thanks for that cool plugin. It will be helpful real soon :-)

  13. lopar says:

    Hi,
    Any chance you can provide older version of plugin which uses jquery 1.3.2? The latest version does not work well on my site. The bar ca be dragged but picture doe’s not follow. It works ok only if I click. Thank you

  14. Luc says:

    Hi,

    This is a nice plugin, thanks a lot ! According to me, the best point is that it is usable with keyboard thanks to links before/after. This is a big plus. (I didn’t find any other before/after plugin I can do it with)

    Which is the licence applied to your code ? I’m actually working on some improvements to respond to my needs and I think they could be useful for someone else. Is the code available on github ? Could I publish my improvements (in this case I’ll credits and link to this page of course)

    First one is allowing to target multiple group of images with a class instead of an id.
    In my case, contributors can add as many after/before couple of images as they want in a page. So I’ve made a TinyMCE template (contributors just have to add their 2 images) but adding a different ID is too tactical. Whatever, thanks to the following script, I succeed to target each before/after group with the same class (‘before-after’ in my exemple) :

    $(function(){
    $(".before-after").each(function() {
    $(this).beforeAfter();
    });
    });

    The other improvement I’m working on is exporting from JS file to a CSS file as much CSS as I can. I combine exported declarations with a .js class (from .no-js technique). For exemple :
    .js .before-after {my exported declarations}
    If Javascript is activated (.js), CSS applies. If not (.no-js), CSS doesn’t apply.

    Before I go, is there any way to make it responsive ? I’ll try to look for it afterward but it seems a little bit more complicated. X-P

    Thank you in advance for your answers !

  15. Luc says:

    My mistake about the licence, I’ve just seen it was in the file ;o)

  16. Brittany says:

    Hello! I was experiencing an issue due to a CSS problem (max width), as noted in a comment above, but I fixed it (or so I thought). However, now, when the page loads, the images don’t appear (it’s a height problem), but when you refresh the page, you see all of the images. Any help would be appreciated! http://uvamagazine.org/articles/charlottesville_then_now

  17. Hi,
    I am a 56 year old man dabbling in photo editing and would like to be able to utilise this wonderful piece of script so as to show my work on the website I am adapting to my needs, I am using Joomla 3.2.1 with a Shape 5 Template.
    Is there anyone who can help me with instructions as to how I would incorporate this in an article?
    Or is there someone who has created a plugin or module for Joomla?

    Forgive if I am intruding on qualified persons space.

    Regards,

    Alessandro

  18. Michael says:

    Implementing this for a client – I ran into an issue where the clients template applied max-width:100% to all img tags.

    Unless CatchMyFame updates the javascript to take this situation into account – you’ll need to reset max-width on the img elements in your init script.

    Something like this would do:
    $(el).find(‘img’).style(‘max-width’,'none’).

  19. Oliver says:

    Hi
    I would like to make it responsive. Is there a solution for that except have multiple versionens and control it with display none? The problem is the with and height tag in the image. I

    Thanks a lot
    Oli

  20. Tom says:

    Just wanted to say thanks for making awesome things and making them available to others. We used this as part of a local history project.

  21. Thibaut says:

    For those who want a responsive version :
    http://www.studioholaf.com/sources/jquery.beforeafter-1.4.responsive.min.js

    Thanks for your work, it’s pretty cool!

  22. Justin says:

    For the life of me, I can’t get this to work. It’s making the container DIV and image DIVs at 0px height. All I see are the text links for “show before” and “show after”.

  23. Vyacheslav says:

    In plugin version 1.4 you need move line with:
    var randID = Math.round(Math.random()*100000000);
    after
    return this.each(function() {
    othewise not posible use multiple elements initialization like:
    $('.container').beforeAfter()

  24. Graham Dawes says:

    Great plugin! Is there anyway to zoom and pan the images so that the user can compare the detail in the image?

    Thanks

    –Graham

Trackbacks/Pingbacks

  1. [...] created a dedicated page for the plugin at http://www.catchmyfame.com/catchmyfame-jquery-plugins/jquery-beforeafter-plugin/. In the future this page will be updated to contain the latest information for this [...]

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>