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.
Wow this is a very very very cool. Thanks
This is outstanding! Just what I needed for an interior designer’s before & after shots. thanks for sharing.
This is an excellent plugin. I have found a small issue, however and I’m not quite sure how to deal with it. Every so often when I load a page that utilizes this it seems to resize the images to 1px X 1px. I am using the timthumb.php script to generate these images and so I’m not 100% certain that this script could cause such an error. Just wondering if anyone else had any issues. Thanks
(this happened in firefox 3, two separate computers on different networks)
I solved the issue (I think). The problem was that I only declared the image sizes in the timThumb portion of the script and failed to declare it in the same way this script needed. It’s great using this without having to resize your images prior.
Great plugin, thanks for this! I’m very new to jquery and was wondering if there was some way to modify the plugin so the intro animation makes several passes between before and after states before settling on a side?
Its Awesome. Thanks for sharing a wonderful plugin.
I don’t even care about the plugin itself, I just love screwing around with the demos. Especially Conan and Mario
Man, I had something like this back in my younger days. We used a prgram called BeerQuery.
Take that lady as an example. In the bar and after 6 beers she looks just like the after shot….. when ya wake up in the morning you find teh before shot. WTF!
10/10 for this script!
Very cool, thanks for making this available.
hi, tanks for the beautiful plugin.. i used it perfectly but i’ve only a doubt:
in the second example page i see that both the pictures before-afeter are loaded in the same time witout any any scrollbar during the loading like perhaps happend in the example number 1. can you expalin me how to use this plugin correctly in this way? thanks very much and sorry for my bad english!
bye
@teildbid – I saw that you commented on my blog and I will try to help you out here. Unfortunately I don’t know how to fix the problem you are having. It does happen on my site sometimes as well… it seems to be a random occurrence.
I will try and relay the question to the author of this plugin so that maybe we can better understand. Don’t worry about you’re english… my Italian is much worse. ;)
@Admin – the problem we are referring to as at the time of a page load, this plugin seems to stack the images and for a brief period both images are visible to the user. Moments after this the plugin seems to “kick in” and all works as it should. On this demo site I can’t seem to replicate that problem but it does happen on other’s sites. Any tips?
@Nico and teilbid
Example URLs?
thank you very much nico for the interesting!
I really hope to receive the right answer..
if you want you could post here the code you utilized in your site.. mine is this:
$(function(){
$(‘#container’).beforeAfter({
animateIntro : true,
introDelay : 500,
introDuration : 500,
showFullLinks : false
});
});
sorry but the code doesn’t appear in the precedent post.. i try to repost it:
$(function(){
$(‘#container’).beforeAfter({
animateIntro : true,
introDelay : 500,
introDuration : 500,
showFullLinks : false
});
});
@ADMIN
a right example is in the first and the second examples pages or in the site of nico, the pics are loaded in the same frame. on my site and in this page (if empty your temporary internet files) the pictures (after and before) are loaded resizing the frame and in any case with scroll bars until the total loading is complete.
is there any tips (preload of pictures or other) to resolve this problem?
thanks very much.
Admin please help me…
thanks you!!
I’m not seeing the issue. Perhaps it’s a CSS problem? Preloading might help but I’d need a better test case to look at.
Could you send me the html code of the second example page (http://www.catchmyfame.com/jquery/demo/8) ? only in this way i can understand where are my mistakes.. it’s xmas time.. :-) this can be abeautiful gift for me..
thanks
bye
Really amazing plugin. And so lightweight. Great work
Very thanks for this big sript. Big und great work… Thank you
Thanks for sharing this amazing plugin! I was penning this Photoshop tutorial where I felt that side by side comparison of photos are not enough to accentuate the differences between them, and your plugin just came at the right time (Woork shared your plugin as one of the 10 popular jQuery plugins in one of his latest posts).
However, I needed to create a wrapper around the #beforeafter div container for styling reasons, and adding padding: 5px to the div will only mess the style you’ve implemented, so I made some modifications to your script which I hope other readers might find useful.
In the header, I loaded:
$(function(){$("#container").wrap("");
$("#container").beforeAfter();
});
In the jquery.beforeafter.js, I added a few lines:
// Set wrapper width to image width$('.container-wrap').css('width',imgWidth);
I think it’s rather straightforward and many other users familiar with jQuery could have done it, but I’m just sharing my 2 cents :)
p/s: Oh and I realized that by loading jQuery library alone doesn’t work – I still have to load the jQuery Minute as well. Is there any reason why? (in both cases I have loaded the jQuery UI)
My apologies for forgetting to convert the code to proper HTML entities for the code I have inserted into the header:
$(function(){$("#container").wrap("<div class='container-wrap'></div>");
$("#container").beforeAfter();
});
Nice idea, just found this through a roundup of JQuery plugins on onextrapixel.com.
Thought you might like to know I’m using it on my Photoblog to show before and after photoshop – http://mute.rigent.com/index.php?ladat=2010-01-01
a great script
Great!
Love the script it is great to work with and easy to place
first question LOL
can you show how to implement more then one slider on a page
second question
any more options that could be used
third question
why is this not a plug in yet it is the greatest thing since sliced bread :-)
thanks
Brilliant piece of work. Really neat!
Perhaps you could put the path to the images in the options, instead of hardcoding it in the plugin.
@Ina Libaax
Agreed. A couple of others have asked for this as well and it’s simple enough to do. Look for a minor update with only this change coming this week.