NotOneBit Blog

Get started today on your next web project with NotOneBit
We've been doing web development before you were born *

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:

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:

and many more…


Download (version 1.4)

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>

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">

That’s it! You can apply the before/after plugin to any number of elements on a page.


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.


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:

	animateIntro : true,
        introDelay : 2000,
        introDuration : 500,
        showFullLinks : false



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.

193 thoughts on “jQuery Before/After Plugin

  1. Hello everyone I am Nitesh Joshi, pls can any one can give me same before/after image in video tutorials how can i make this before/after image pls pls mail me on (

  2. Hello! Can anyone help me figure this out? I tried creating it in WordPress but it seems like it might be having a conflict. I can’t get it to work :/

  3. very good plugin.
    instead of clicking the picture to chance, iwant a mousover to change the before after.
    How is this possible ?

  4. Is there a way to make this resizable? For example, when I resize my browser window, it will resize as well.

    Is it even possible to achieve?

  5. Is it possible to fire a function based on the poisiton if the dragger so when a user is dragging between the images different functions can fire?
    ie. if the dragger position is less than 0.5 do X, else if it is greater than 0.5 do Y

  6. Hey, this is great! We’d like to implicate this concept on a whole webpage, with ability to scroll both sides seperately (so essentially two websites layered ontop of each other, with the before/after feature), do you think this could be done with your plugin? Have searched around for others, but yours is definitely the closest to functioning the way we wish.

    Thanks again!

  7. I have created a plugin for beforeafter.js in WordPress (X Theme). Using the wp_register_script and the wp_enqueue_script but the jquery file ‘jquery-ui-1.8.13.custom.min.js’ clashes with the X theme versions of jquery. Is there any way to define what what was customised in order to replicate on a newer version of jquery?

    I hope that makes sense.

    1. According to the WordPress documentation, jQuery UI draggable is already included in WordPress so you just have to put
      in your functions file.

  8. I’m getting a height of 0px for each of the image divs. Why is this happening?? I have height and width inline properties defined on the img tags. It’s using the correct width but the height is always 0. Please help.


  9. Hi there,
    I am trying to develop a similar functionality for iPhone and Android phones. Will your library work with these devices?

    1. If you mean the automatic back and forth of that link (which I find annoying) yes you could. You’d just need to add a loop to animate the slider. Bit of work, not an option built into the plugin.

  10. Hi,
    I’m trying to use this plugin with jQuery 1.12.3 and it isn’t correctly. I have also tried jQuery 1.11.2. Both versions allow me to click on the photo and the slider moves, but I can’t drag the slider. I tried to use the latest jQuery-UI, but that stopped things working completely. Any ideas?

Leave a Reply

Your email address will not be published. Required fields are marked *

%d bloggers like this: