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.
thanks you , never seen somthing like this!
hi
i’d really like to integrate this great slider on my site (joomla). it works fine with the standard templates, but no chance on my selfmade one. if anybody of you has an idea what i am doing wrong – i’d be really thankfull – thanks in advance
http://www.hatek3d.at/index.php?option=com_content&view=article&id=6&Itemid=8
That’s pretty cool. I wish I had some use for it on my site. Thanks for sharing.
Is there a way to set it so when the bar automatically slides across, instead of stopping half way, it can completely slide across on it’s own without having to drag it manually and finish the other half?
i use wordpress (innovation & science theme) from dc. in my gallery section it uses lightbox.
i need to manually set a link/url for the images at set sizes.
1 is there a way to use this with lightbox? or with this theme?
2 is there a way to keep the slider to stay to the left and not to the middle?
you can view my gallery at http://www.anthonymorrow.com, of course go to gallery.
thanks for the great work, this is just what i need and i hope i can make it work. it’s light, clean and simple… just like me.
peace
any change we can get this cool code in cc-by-sa-3.0 for use in the herbew wikipedia?
This can workwith Joomla, but not so good with WordPress, at least I think so
First off, this is an incredibly slick, simple, and useful plugin. Excellent work and much thanks. I always feel bad asking for help from someone who has obviously worked so hard on something.
As with Ryan Kelly, I would like to use your plugin for a site but need the positioning to be in a DIV with CSS attributes (in Dreamweaver, an AP div, elsewhere a DIV with position:absolute as well as other position and z-index attributes attached). When I try to use an absolute position div or attach css to the working div, it stops working. I need the plugin to work with css attributes.
My test-site is Before-After-Test
As you can see, this site is a liquid layout. Drag the window to resize and see the flow of graphics, so I will also be trying to make the before-after div work with scalable graphics. I’m hoping just being able to use AP divs will also allow this to work, but know it will be an issue.
Thanks
Really cool idea. I like it hope I can get it to work for me ! Great going :-)
that’s pretty cool
Great! Very useful script for such web designers like me :)
Awsome!!
there a way to implement it in WordPress?
Very disturbing.
Nice plugin. I’m sure there will come a time when I will need this ;)
Awesome! I can hardly believe that I haven’t seen this used somewhere!
I will definately think about it in some of my future projects.
Cheers!
Nice work
http://www.redshift.com/~lorac/2views.html
I’ve implemented this jquery plugin on the page referenced above. It works in Firefox, but in Chrome and IE8 the handle is visible but the slide right and left doesn’t work. Also, the “before and after” text links do not work in these two browsers.
Any suggestions on why this works in Firefox but not Chrome and IE8? What a pain.
lorac
Try debugging with Chrome since the demos work fine indicating that there’s a problem in your implementation.
I appreciate your reply, but I’d like to make you aware that I don’t know jquery or editing js files. That I why I’m asking for help. It took effort to get it to work in Firefox, so if someone who knows how this plugin works and can look at my page I’d be grateful.
lorac
Try disabling your other JavaScript files (menumachine) and see if that fixes it. Maybe it’s a conflict between them.
Okay, I removed the MenuMachine script and the before after plugin worked in Chrome and IE8. Having this result is no solution because if I have to choose between MenuMachine and the plugin… well, you can imagine I’m not getting rid of my menu.
I’ll check with MenuMachine support to see if anything can be done.
Thanks… other than this issue, the plugin is cool.
lorac
Okay, MenuMachine had a fix. Well, it was for Safari but it worked with Chrome and IE too. I place this just before the closing head tag and now the Before/After plugin works.
if(typeof(Array.shift)==”undefined”)
Array.shift = function(){};
All is well…
lorac
Can i get this 4 free aswell for joomla??
The question I have is: If I want the handle to move not just to the middle but to the left completely and stop on the left side when the before/after starts. Is there a setting for this?
I appreciate your answer.
http://bellezanaturalcolombia.squarespace.com/
Great plugin!
Love to implement it but my css isn’t applied properly
http://www.savemywedding.nl/werkwijze/nabewerking/
It’s a wordpress blog that generates a border around content items images.
.content_item img {
border: 1px solid #dedede;
padding: 3px;
}
Somehow that isnt working with this script. How can i make it work.
CSS Noob :)
Link didn’t work for me, but have you tried overriding the CSS with your own?
Hey, this is really good. I’m using it on my website now. How would you like me to credit you?
http://www.hundtconstruction.com/morph1.html
Really pratictal, so many way to use it. Probably for a Hairdresser website?? :-) Good stuff !