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
Download jquery.beforeafter.zip (version 1.1.0 – January 12, 2010)
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.
No related posts.
[...] Catch My Fame Technorati-Tags: JQuery,Plugin [...]
[...] Catch My Fame » jQuery Before/After Plugin (tags: jquery javascript plugin before after) Socio-Encapsule this: [...]
[...] http://www.catchmyfame.com/2009/06/25/jquery-beforeafter-plugin/ [...]
[...] Catch My Fame » jQuery Before/After Plugin – 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: [...]
what a great brain you have…
your site is a inspiration for me really…..
i am great fan of you
[...] Catch My Fame » jQuery Before/After Plugin [...]
[...] Before After This plugin helps to show the difference between 2 images, that let user to 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. [...]
Really cool. But it’s not working for me in the curse of browsers, IE. either 8 or 7 in compat mode. The green handle doesn’t appear. I have a demo here. Any ideas? I’d really like to use this. If only IE would die or go away – always extra problems.
http://jkmsites.com/before-and-after.html
@Jim Mooney
Well since this doesn’t happen in the demos, and does happen on your site, my first guess would be some conflict between the three frameworks you’re using simultaneously. How about trying a plain vanilla test on your site without dojo or mootools?
I removed dojo. Unfortunately I can’t remove mootools since Joomla unwisely made it impossible to do that by using it in the administrative back end. I’m going to try a hack on that but that, though. Joomla has a very old mootools 1.1 that is forcing everyone to migrate to jQuery. Still, jQuery is in noconflict mode, which I thought would let it work with mootools. Good point about the demos. I should have viewed them in IE first ;’) I’ll fiddle around and see if I can get it working now that I’m sure it works in IE.
[...] found this very useful and immediately created Before/After jQuery Plugin for the same purpose. The possibilities for this plugin are [...]
[...] View Demo and Tutorial [...]
I really like this plugin and it works great. I wanted to try to take it to another level and when a user clicks on a thumbnail I’m going to put below the Before and After frame, it swaps out the pictures and reloads the so I get the same introAnimation and introDuration to run on each reload. Is there any advice you can give me to get that to work?
Did you ever get the thumbnail/gallery idea working with before&after? If you did that would be great! I need exactly that for a project!
[...] کرد. نمونه دمو را در اینجا ببینید. پرونده ها نیز در این آدرس قابل دسترسی [...]
[...] کرد. نمونه دمو را در اینجا ببینید. پرونده ها نیز در این آدرس قابل دسترسی [...]
I think this is great, but I’m also after something similar to Jeremy (29th Jan) – a row of thumbnails to be clicked that then swap the before+after images for new ones (essentially a gallery with this bolted over it).
Any help be great thanks! :)
Having a problem with using this within a WordPress page. I got the first set to work, but every set after that does not work, even though, I copied and pasted the code from the first set. Do I have specify unique ID’s for each container div? Are there any special rules I need to define in the js function? Any help would be greatly appreciated. Link to where I’m using it: http://www.adservices.net/devblog/before-after/
Great job getting it running! How did you do it? I’m also having that problem with wordpress. Did you set up unique container IDs?
Yes, unique container ID’s were the the key. What I didn’t realize the first go-round was that they all have to be declared in the head like this:
$(function(){
$('#container').beforeAfter({imagePath:'/jquery/'});
$('#container1').beforeAfter({imagePath:'/jquery/'});
$('#container2').beforeAfter({imagePath:'/jquery/'});
$('#container3').beforeAfter({imagePath:'/jquery/'});
$('#container4').beforeAfter({imagePath:'/jquery/'});
$('#container5').beforeAfter({imagePath:'/jquery/'});
$('#container6').beforeAfter({imagePath:'/jquery/'});
});
</code
[...] Catch My Fame Demo | [...]
thats a great plugin i will try them. thx for your post
Hi everybody,
I tried to use this fabulous plugin within WordPress but I didn’t success. Can you help me please ? Here the site where I wish use it : http://withoutfx.com/withoutfx/?p=8
Thanks ;)
[...] emphasize the difference between our raw material and the final results we were using a jQuery plugin called ‘beforeafter’. As the nerds amongst you might have already noticed, we just switched to a more sophisticated [...]
hi thanks for such awesome plug-in . but i found a problem this plugin is not working with jquery noconflict mode please help thanks
Hmmm, I just tested it in noConflict mode with mootools and it worked great.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/mootools/1.2.4/mootools.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.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">
$.noConflict();
jQuery(document).ready(function($) {
$('#container').beforeAfter({
animateIntro:true,
imagePath:'/js/'
});
});
</script>
I even ran mootools code after the above code which worked fine.
Very fantastic script. It’s cool for photomanipulators and photographers.
[...] Display before after effects with photos.Detailed Description: Before After plugin integrates jQuery Before/After Plugin in the wordpress. It can be used to show the difference between edited and original photo, before [...]
[...] na ja, da setzt momentan meine Gehirnwindung aus. BeforeAfter Plugin [...]
i used before&after mixed with colorbox and i’m having an issue where when i manually drag the bar left and right… the view of the after moves about 150px to the left of the drag bar
http://www.123ktp.com/home.php?request=services
click on “Optimized Image Sample”
I’ve tried editing the innerHeight and innerWidth being passed into the jQuery beforeandafter()
i really don’t wanna tear apart the beforeandafter.js file, so if you know whats wrong… that would be fantastic
nevermind.. i figured it out.
i forgot the iframe declaration in the colorbox. so then i could put all my javascript into my beforeandafter.php file and that worked out the bug
Great plugin, thanks!
Sugestions:
1) toggle view buttom;
2) add option to snap the drag bar to mouseover event. I can “simulate” this by mousedown on bar, move outside image, mouseup and return to image. Apparently I can queue the control over the all bars until I not click again in the image :P
Thanks for this.
Can’t believe how easy it was to get working in WordPress following your instructions. I already had “before and after pics” and was using css ‘hover’ to get the effect. This is a great improvement. It even works in ie6 which is an extra bonus as I still try to keep it supported.
Thanks again.
[...] jQuery Before/After Plugin → This will be useful for some. [...]
[...] http://www.catchmyfame.com/2009/06/25/jquery-beforeafter-plugin/ [...]
[...] per dire… ) sugli effetti del filtro polarizzatore (vedi recenti articoli su Uilitypc…) Molto ben spiegato qui si rivela semplicissimo da applicare e anche piutosto sbrigativo richiedendo di fatto le sole due [...]
Why can’t I align all images within the container to the center? Or change the size of the container?
Huh? The size of the container is based on the size of your images. Want a bigger container? Use bigger images. And what do you mean align the images to center? Each before after container should contain two images and they are positioned on on top of the other.
I can’t get the before and after images to align to the center of the div they are in.
Here is my url http://www.lumocreative.com/
& here is the url of the alignment I want http://mute.rigent.com/index.php?ladat=2010-01-01
Thanks
Put a margin on your container div. margin:0 auto.
There is an alignment problem when the browser window is re-sized. The image reveal is not aligned with the drag hangle bar. If you refresh and keep the browser window at the same size it re-aligns. I placed onResize=”window.location.href = window.location.href;” on my body tag but it is conflicting with a collapsible div i have on the page every time you expand it it loops. Example 2 link on the page has this alignment problem http://www.catchmyfame.com/jquery/demo/8/. Any ideas how to solve it? Thanks
There’s no alignment problem, you’re doing something wrong. Awesome plugin.
[...] Shared jQuery Before/After Plugin. [...]
please tell me step-by-step to use this plugin in wordpress post
i already follow your intruction but still failed on wordpress, but success on pure HTML.
thanks
Awesome plugin! Thanks for putting it together, and polishing it as well. I saw a similar effect on the site for the ELI movie and loved it. I wanted to use that effect for a pressure washing contractor website to show before and after shots of things being cleaned. Exactly what I was looking for.
Really Great Work , i have never seen before… Thanks
[...] Catch My Fame » jQuery Before/After Plugin 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. (tags: images animation graphics web-developer web-developer/tools web-developer/javascript web-developer/jquery) [...]
If I have this inside an element which is positioned relativly, the slider wont move acurrately, any ideas?
For example, my wrapper element has “position: relative;” set in the CSS and if you click to the left hand side of the slider it doesn’t move properly, the right hand side is fine: http://www.nicemess.co.uk/portfolio/relative-example/
It works fine if I don’t declare this on my wrapper:
http://www.nicemess.co.uk/portfolio/
Thing is, I want the wrapper to be positioned relatively for some other page elements. Is this something that can be fixed?
[...] inspiration for the experiment was taken from the extremely useful jQuery Before / after plug-in, which I’ve yet to use but do plan to in the [...]
[...] 20. jQuery Before /After Plugin [...]
[...] 20. jQuery Before /After Plugin [...]
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
[...] information about the plugin and its installation methods can be read here. Leave a Reply 11 views, 11 so far today Tags: Before/After, jQuery, plugin [...]
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 :-)