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. Thanks a bunch! Works like a charm. Nice write-up, too.

  2. Cemal Ekin says:

    I like the effect and wanted to experiment with it on a testbed I keep. I have had several difficulties some of which I was able to overcome (I think) but it is still not working. See the test page at:
    http://www.keptlight.com/testblog/?p=1

    Here are the steps I followed:
    1. I downloaded the ZIP file, extracted the folder beforeafter
    2. Uploaded the folder to the plugins folder on my WordPress site
    3. It did not show up as a plugin per se, but I continued on
    4. I added the header information I copied from this site
    5. I saw two images stacked on top of each other
    6. I looked into the folder and noticed that the JS file name was not what I copied and pasted in the code. So I changed it to conform to one of the names, jquery.beforeafter-1.4.js
    7. I ended up the effect producing a similar but a strange effect, instead of hide-reveal of full images it seems to stretch one image as you see
    8. I also do not see the slider handle, probably a CSS issue pointing to the right image file is needed but I do not know where the CSS declaration may be.

    Any help you could offer will be greatly appreciated. Thank you

    • Cemal Ekin says:

      Update: I have found the hard-coded path in the JS file and modified it to reflect where it is. Now the image of the handle is there but is very slim. The arrows show up too. The main problem still remains that the image is stretched-squeezed rather than covered-revealed.

      • Cemal Ekin says:

        I have figured out the problem finally! There was a declaration in the theme CSS which specified max-width for the images in the content area, 98%. I disabled that and the B&A is working now. Thank you for making this available for us to use. If it were a fully developed WordPress plugin by the original author, that will be a welcome addition to my collection.

      • Cemal Ekin says:

        A different kind of problem now. I cannot implement a second instance. I tried the following:
        1. Used “container” ID for both, only the first one works
        2. Used “container” and “container1″ IDs, only the DIV with “container” worked regardless the ordering of the divs.
        You can see the two sets of images where one works and the other does not:
        http://www.keptlight.com/testblog/?p=1

        I feel so close, yet not there yet ;-)

      • Cemal Ekin says:

        I peeked into your example 2 code and realized that you are declaring the container# several times. I replicated the idea on my example and they are both working now. The multiple images per page requires a function like below, thanks again:

        $(function(){
        $(‘#container1′).beforeAfter({imagePath:’wp-content/plugins/beforeafter/js/’});
        $(‘#container2′).beforeAfter({imagePath:’wp-content/plugins/beforeafter/js/’});
        $(‘#container3′).beforeAfter({imagePath:’wp-content/plugins/beforeafter/js/’});
        $(‘#container4′).beforeAfter({imagePath:’wp-content/plugins/beforeafter/js/’});
        $(‘#container5′).beforeAfter({imagePath:’wp-content/plugins/beforeafter/js/’});
        $(‘#container6′).beforeAfter({imagePath:’wp-content/plugins/beforeafter/js/’});
        $(‘#container7′).beforeAfter({imagePath:’wp-content/plugins/beforeafter/js/’});
        });

    • Cemal Ekin says:

      With apologies, I would like to indicate that the testblog I used for this purpose is no longer accessible. If you like to see this plugin in action please point your browsers to:
      http://www.keptlight.com/2013/09/yet-another-sharpening-method/
      http://www.keptlight.com/2013/08/split-sharpening-3/

      • Adrian says:

        Hi! I’m trying to implement a before/after page on my website, How did you manage to implement this in wordpress?

      • Cemal Ekin says:

        You will find the steps I followed in this comment thread, start with my first one and follow my steps in the subsequent comments, essentially replies to myself so that others reading them will learn how I threaded the needle. Maybe I should one day write a post about this. I wish someone could develop this into a WordPress plugin.

  3. humbadalgaye says:

    Fine way of explaining, and pleasant paragraph to take
    facts about my presentation subject, which
    i am going to deliver in institution of higher education.

  4. Rob says:

    Hi. I included this plugin into a joomla 3 page as described above. In Firefox i can see and use it. But in google chrome, nothing is displayed :(
    I could edit the css, if there was any. Could you please rewrite this plugin to use an extra CSS file and use some classes, so ciritical styling-bugs can be corrected more easy?

    Here’s the page, where it does not work: https://mvg-mobil-blog.de/login.html

  5. dominic says:

    I’m having difficulties putting a group of these side by side horizontally. Is this possible? What would the div structure look like?

  6. Brian Gelhaus says:

    Instead of making the user click on the little green knob, how can I make the effect on mouse hover like http://www.jpegmini.com/ homepage example?

  7. What i do not understood is if truth be told how you’re no longer actually much more
    neatly-preferred than you may be now. You’re very intelligent.

    You know therefore considerably relating to this topic, made me
    personally imagine it from so many varied angles.
    Its like men and women are not interested until it’s
    something to accomplish with Girl gaga! Your personal stuffs excellent.

    All the time take care of it up!

  8. Sean says:

    Nice work. A friend found your widget used on the UVa (University of Virginia) site and asked me if I could implement it for him. Helpful docs and I was up and running in about 10 minutes. Quite cool.

    I am just starting to setup a proper site for him, but here is a quick mockup of the before/after tool in use: http://sdrprep.net/bridge/view13.html (should be interegrated into WordPress and on a different url soon…)
    Thanks!

    Sean

  9. Alan Oehler says:

    Hi,
    We’ve been using this code on our home page, and it works great, but there’s one issue: on mobile devices, the two images appear on the page with the second one vertically below the first for a moment – sometimes many moments, as in half a second or more. Any advice about how to make it behave better on mobile devices?

    Thanks!
    Alan

    • admin says:

      You could hide your images with CSS (display:none) then using jQuery and the window load event, show the images. That would prevent the flash of unstyled content.

      • Alan Oehler says:

        Thank you! Excellent idea. It worked to an extent. Now instead of seeing the two images momentarily, one sees an empty box momentarily. But I think that’s easier to live with than the double image.

  10. Erik says:

    Is there a way to add text to both the before and after images? What about hotspots?

    Thanks

  11. How i Make this Slider in FullBrowser?

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>