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.

157 Responses to “jQuery Before/After Plugin”

  1. steve says:

    I don’t like much to read this kind of reply … “good”, “great”, “nice” and so on. But this is excellent !
    : )

  2. Alexander says:

    What’s changed since 1.2?

  3. dex says:

    Nice, but feature to load images dynamically is still missing.

  4. Nikolas says:

    Hello and very well done for your excellent work!
    I just have one question.. is there any possibilities to combine your plug-in with any lightbox, colorbox, fancybox etc plugins? thnx in advanced :)

  5. Malicia says:

    Hello !
    Thank you for this plugin, it’s fantastic !
    For cons, I have a stupid question, how to change the font color ? I obviously successful to remove the text-decoration and put in black but I don’t know how to put a different color when clicked…
    Thank you for the answer !

  6. Chiron says:

    Great plugin. A client pointed out an issue with the Firefox browser inadvertently selecting either the before or after image. Selection turns the image blue making it difficult to see clearly. Of course, the user can click away from the div containing the image to return it to its normal colors, but some might not know that and get stuck dragging the handle back and forth over an entirely blue, selected image. There’s an easy CSS fix that works to prevent image selection in Firefox and other Mozilla browsers, but I’d like to prevent image selection for those using IE. Any suggestions?

    • admin says:

      @Chiron,
      Firefox exhibits no such behavior. Do you have a link to an example?

      • Chiron says:

        I should have been more specific. No matter what browser, a user can select either the before or after image, or both, by holding down the mouse button and dragging over the that contains the images. This will cause the selected image or images to turn a blue color. A selected image will remain blue, even while the user interacts with the plugin and moves the handle back and forth. The only way the user can return the image to its normal color is by clicking away from the image or by clicking somewhere outside the containing element. My client reported this issue and was confused by it. He didn’t intend to select any of the images but, due to some sloppy mouse movements, the images did get selected and remained blue while he interacted with the plugin. This really bothered him.

        The good news is that I found a solution. I injected a bit of JavaScript that disables the user from accidentally selecting the images. The script prevents image selection when a user drags the mouse over an images while holding down the mouse button. This prevents the images from turning blue but does not interfere with the functionality of the plugin. The user can still copy an image by right-clicking it and choosing to save but can’t select the image by clicking and dragging the mouse over it. Probably not the best solution, but it does make my client happy.

      • Chiron says:

        I should have been more specific. No matter what browser, a user can select either the before or after image, or both, by holding down the mouse button and dragging over the div that contains the images. This will cause the selected image or images to turn a blue color. A selected image will remain blue, even while the user interacts with the plugin and moves the handle back and forth. The only way the user can return the image to its normal color is by clicking away from the image or by clicking somewhere outside the containing div element. My client reported this issue and was confused by it. He didn’t intend to select any of the images but, due to some sloppy mouse movements, the images did get selected and remained blue while he interacted with the plugin. This really bothered him.

        The good news is that I found a solution. I injected a bit of JavaScript that disables the user from accidentally selecting the images. The script prevents image selection when a user drags the mouse over an images while holding down the mouse button. This prevents the images from turning blue but does not interfere with the functionality of the plugin. The user can still copy an image by right-clicking it and choosing to save but can’t select the image by clicking and dragging the mouse over it. Probably not the best solution, but it does make my client happy.

      • admin says:

        Well, they’re images so yes, they’re selectable. What else would you expect? Most users are sliding the slider bar back and forth rather than trying to select the images so this sounds like user error not code error.
        Anyway, an earlier version of the before/after made the images background div images which would alleviate this problem without any added JS code. Feel free to modify the script and you should see your selection issue disappear.

    • Mogga says:

      This is just your selection color. Probably can adjust your css to a different selection color or make the images a background image instead of the normal selectable variant. The plugin wipes content divs. It’s up to you to make it selectable or not.

  7. very neat little plugin, thanks for sharing it with all of us

  8. Mogga says:

    Couple ideas…
    1) optionally make the handle draggable up and down so you can change it’s position along the bar
    2) make a toggle link option so you can click the same link to see before and after instead of two separate links
    3) add quicktime control syncing to sync the playhead of two movies
    4) add a vertical / horizontal toggle
    5) add webkit functionality to allow angular wipes like a rotating windshield wiper with a handle to allow linear drags when you like the rotation angle
    6) add synced zooming functionality
    Very useful! Will use this soon for sure.

  9. Mogga says:

    another idea…
    make the image assets one png instead of 3 images and crop as needed. If it’s a little wider to accommodate the animation or laid out vertically it’ll be that much more compact. nicer to customize too.

  10. KrisBerg says:

    Thanks alot! This was exactly what I was looking for!

  11. Ethel says:

    Hello,
    this is a really cool plugin!
    How much does the license for a commercial website cost?
    Many greetings, Ethel

  12. Dave says:

    Very cool.
    I’d like to know if there’s a way to stack more than two images and sliders over each other? I have a set of seven images to reveal. Thanks!

  13. Shawn says:

    I have beforeafter in a Fancybox lightbox, but when it appears, it adds a vertical scrollbar in IE8 that causes the content behind to shift left. Also, the animateIntro doesn’t work when it’s in the Fancybox.

  14. John Vincent says:

    In Firefox the handle.gif image doesn’t appear, but the word handle does in its place. (it is gray and hard to see, but it is there.) Somone said they saw the image on the first load, but when they went back to the page it had disappeared.

    Any suggestions?

    • admin says:

      You must mean in your own implementation since they appear fine on this site. Check your image paths.

      • John Vincent says:

        Yes, my own implementation — for whatever reason they sisdn’t work until I edited the file path — a direct link instead of a relative one.

        This is a great bit of code, and we have plans to use it all over our sites. Just super.

        Our tech people say there’s a conflict with prototype.js. Any idea what that might be or what a workaround is?

      • admin says:

        I’m not aware of any conflicts but you can run jQuery in noconflict mode or post your code to be examined.

  15. Jamal Robert says:

    Hi there. Such a great plugin.
    If this is not too much to ask, i was wondering how to implement this in wordpress (use as a wordpress plugin), thanks.

  16. flafson says:

    First of all, i love this script, been using it for over a year now.

    Someone gave me an idea of incorporating this script inside a slides/gallery script which is also JQuery so i tried to that. Problem is, they seem to be conflicting for some reason and i have no idea why.
    This is the other script: http://slidesjs.com/

    Any idea what can be done?
    This is my page that i want to have changed:
    http://www.lilianalaser.ca/Zerona-Before-And-After-Pictures

  17. Hitesh Patel says:

    Very nice plugin…
    It works fine in Ipad for Landscape view but when i flip my ipad to portrait view image become smaller so its not work properly, can you please let me know for solution with explain.
    Thanking you

  18. Me says:

    BeforeAfter + lightbox on the same page = both dont work… You should fix that asap

  19. flafson says:

    I would love to have an option for auto slide.
    I noticed some users have a hard time figuring out that they need to drag it left and right, a flash like option where it moves by itself in cycles of 1-2 seconds would be great.

  20. Charles Wood says:

    Any ideas why the two images don’t line up? and the middle grey line extends past the images vertically?

    http://www.bigchaz.com/2088679/6

    Thanks!

    • flafson says:

      Can’t really find anything wrong with the code or the photos but it looks like in the script the before picture is wider than the after. Not sure why that happens as both photos are the same size in and out the script.

    • admin says:

      Looks fine to me. You make a change?

      • Charles Wood says:

        na, still not working. Pay close attention to the handle at the far left and right of the image. On the left it doesnt quite reach the edge, and at the right it goes to far. Its like the images are about 5 pixels off. Also, because cargo is a hosted CMS, Im having issues with the imagePath finding the images Ive placed for use as the nav handles.

      • admin says:

        Why don’t you try creating a bare bones page with nothing but the plugin and your images and see if there’s a conflict with other code you’re running?

      • Charles Wood says:

        working on that. Ive also cross posted on cargo’s site to see if they can identify anything.

  21. Jim says:

    Anyone having an issue installing? I am running WP 3.3 and I keep getting the following error.

    The package could not be installed. No valid plugins were found.

    Plugin install failed.

  22. Jim says:

    Just realized it wasn’t a WP plugin. Sorry.

  23. Mauro says:

    Hi, great plugin, very intuitive and interactive! what if I have 3 picitures? can I put two container one on top of the other? first one with images 1 and 2 and second one with images 2 and 3… or maybe there is another solution.

    Thanks

  24. Uxlco says:

    Hi!
    Your jQuery plug-in is under a CC NC licence–however, I need to use it on a commercial website. Would you be open to letting me use it for this purpose (of course, I would be able to pay for this) ? I would love to be able to embed it. Thanks!

  25. ign says:

    Hey! Great tool. Could it be possible (with minor tweaks) to use this with two fullscreen background images and support browser resize? How much work you think it would take?
    Thanks!

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>