NotOneBit Blog

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

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 (niteshbj@gmail.com)

  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
      wp_enqueue_script('jquery-ui-draggable');
      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.

    Thanks

  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: