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.
Is it possible to re-size the handle in the middle. I tried making the image bigger but it is being constrained by a size somewhere that I cannot find.
Any help would be great…
thanks,
You’d need to create a larger version and then modify the script to account for the change in dimensions.
This is brilliant, I’d been searching for a while but wasn’t sure what the plugin (if one existed) would be called. Before and After makes a lot of sense.
How would one go about having the slider slide based on mouse position, without requiring a click / drag? So the slider would slide on mouseover of the image(s)? I’m thinking this would be a great feature for a header section of a homepage, and cause some delight to the user when they notice the transition between old and new on mouseover.
Thanks.
Thanks. One early version I tested had this functionality but people really disliked it because they felt they didn’t have as much control as they did when dragging. You can hack the plugin to do this however, basically replacing the drag function with mouseovers.
Hi, thanks for making this plugin, it is just what I need. I have a page setup that has two instances of your plugin one for mobile and one for desktop. I have a problem, when I load it up on mobile, a weird green streak appears on the images. This looks like an error on the handle.gif. I was wondering if you had any ideas to fix it?
Link: danielcreese.co.uk/project_amethyst.html
Thanks,
Dan.
I don’t see the plugin working on your link at all, let alone a green streak.
Really?, I have it running, (I have just updated the source code, try it now). I have now removed the reference to handle.gif, however the seperator is not in the correct place. Also the size of BeforeAfter() is set at load time, is there a way to change it on resize?
Thanks,
Dan.
Really. I can see something in Firefox, but nada in Chrome. Try fixing the errors http://validator.w3.org/check?uri=http%3A%2F%2Fdanielcreese.co.uk%2Fproject_amethyst.html&charset=%28detect+automatically%29&doctype=Inline&group=0
Weird, I have it working perfectly in all browsers. I will fix that later, thanks, any ideas about my previous comment.
All browsers except Chrome I guess. However the errors need to be fixed before I can troubleshoot.
Dear Admin,
I have made picture frame and it is working fine…..Thank you so much for this outstanding plugins. I would like to know, how i can fit picture on my page side by side (Right and Left) its only showing top to bottom & second to change the handle color…..pls reply
Reg
Zeeshan
Not sure if this has been asked before, but it is possible to have the option of slider moving up and down instead of left and right? Thanks!
It’s not a built-in option but it could certainly be hacked to do this.
Great plugin, as a newbie I am struggling. Any help would be great.
What am I missing to ge this to work? http://www.5280av.com/beforeafter.html
Ok, I now have the plugin functioning but the text to show the before/after images individually are below the the images. Thoughts?
http://www.5280av.com/beforeafter.html
I’m trying to use this great plugin in my cargocollective website, but I’m not able to make that this work properly. Have anybody used it in this website and can anybody gives the way to use it.
I think this is the best plugin to show my photo retouching work.
Best Regards
Cargo collective?
Yeah… Cargocollective.com is a website that gives accesible tools and networked context to talented individuals… It’s used to photographers, designers, architecs and artist in general… It’s only accesible by invitation.
It gives the opportunity to artist to show his works. Their support use templates but it’s highly configurable. I have tried to add your script inside the customization tools (CSS and HTML) But I’m not able to to make it run. I know other people use your script and I’m asking to the cargocolective support, but u have answer faster :)
I guessed u could give me some indications to implement your plugin, but if you have never heard about it I think must be difficult…
I will share the solution with you when I’ll find it to give support other user os this website
Best regards
Fantastic plug-in. I’m running into an issue I don’t know how to resolve though… rather than progressively hiding the foreground image, when i move the back and forth, my before image is compressed and expanded. any suggestions? see page for example: https://greg-mills-s7vn.squarespace.com/before-after
Thanks!
Well first off jQuery isn’t running so check your paths.
Anyone know how to get this to work with Google Sites? I tried making a new page as a file-container named js and uploaded all the files there, then create a HTML box on another page but the boxes only allow (for example):
http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js
http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js
It won’t load the before-after plugin because of security reasons apparently after doing some reading. The only way to get it to work is by making a gadget, but I don’t quite understand what to do.
Any suggestions would be appreciated.
Hello! We saw your plugin in action on this page (http://tmagazine.blogs.nytimes.com/category/model-morphosis/) and would like to use it on an e-commerce site. I see your CC license forbids commercial use. What do we need to do to get a license for the software that we can use?
We have a really cool idea involving black and white to color transitions.
Thanks,
-Taylor
How can we use this, up to down ?? Not right-left.
Hi,
this is a very good script! For my usecase I have implemented the options MousemoveAnimation and ShowDragHandle.
Thanks!
Is it possible for the images to be centred, if so, how?
Thanks :)
Can the images resize automatically (on a responsive design website)?
Hi Doug,
Did you finaly found a way to make this Jquery responsive? I’m trying to insert it in a bootstrap framework and it’s not working properly.
Thanks,
Pierre
Is there a known solution for the bootstrap issue?
I have successfully gotten everything working with the before and after slider, however, after setting the animate intro setting to true, it does not animate. I did make a change regarding picture size which is set at 800px X 535px. I thought perhaps the larger image size affected it but not settings I change make a difference. Why would the animate intro not work?
Without seeing an example I have no idea. Are you getting any errors?
No errors that I see. It just does not slide over from the right side and stop at center. I am using google chrome.
Also, when trying to put this in let’s say a single page promo site, I cant get the images to show up. They are there, but not visible. I am going to try smaller images and see if that helps, but any information you can provide in making sure it works in a page would be greatly appreciated.
https://www.dropbox.com/sh/znnnrx911e8q2qz/N5xeRclCWb
Sorry, I’ll need to see actual code, not pictures, to troubleshoot.
Can someone give me a step by step as to how to incorporate Touch Punch to a BeforeAfter page? I am not exactly sure where to put the code and snippets.
Thanks!
Chris
Just include the touch/punch plugin as it shows at http://touchpunch.furf.com/. Then include Before/After it.
hey,
really nice plugin. How can i use this, up to down ?? Not right-left. Is it possible? what i have to change in the code?
thx
fantastic slider! Question: can the slider be setup with a class instead of an ID and still function? I would like to display multiple sliders on the same page. Is there a performance reason for setting up an ID instead of a class perhaps? Thank you
Can you, or someone, post a link to an example of this plugin in action using before and after photos that don’t line up perfectly? I’d like to see if the transition effect still looks good when used with more amateur photos. Thanks!
You can also see it in action here http://www.fawaks.com/steroids-before-and-after-bodybuilders/
i am into image retouching and image manipulation. i donr know scripting or html. can somebody help work this sliders on my images?
Hi,
I would like to use a event after before for my site site on the page design.
Do you have advice ? I need help
Thanks
Sarah
Is there any way to change the color of the green part of the slider? Dumb question I know .. jw
I was wondering if this would work with videos? thanks!
Hi!. We are using your slider for our project and it works perfect! We really appreciate that you share your knowledge and free this gadget We had a project to use aerial pictures to describe the housing bubble in spain and its impact on the territory and your script it´s the perfect tool for it!
Best Regards, Miguel