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.
10/10 for this script!
Very cool, thanks for making this available.
[...] #before/#after plugin to show perfektly the changes in a picture http://www.catchmyfame.com/2009/06/25/jquery-beforeafter-plugin/ [...]
[...] Catch My Fame jQuery Before/After Plugin jquery before/after plugin to show perfektly the changes in a picture Tags: jquery before after [...]
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
[...] jQuery Before/After est un plugin étonnant qui plaira à tous ceux qui veulent proposer la comparaison de deux états d’une photo. Chacun des deux états apparait de part et d’autre d’une ligne médiane où un grip vous attend pour faire glisser un slider qui dévoilera l’autre partie de l’image. Le script pèse 7 ko et nécessite jQuery UI en plus de jQuery pour fonctionner. Je vous laisse avec une démonstration parfois surprenante Posted in Plugin jQuery | Tagged Comparer, Image, jQuery, Photo, Slider Cancel Reply [...]
[...] a look at this plug-in here. For the demos [...]
[...] shows the strength of you passwords by telling you how long time it would take to brute force them.Before After This plugin helps to show the difference between 2 images, that let user to drag a slider over the [...]
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();
});
[...] enlace: http://www.catchmyfame.com/2009/06/25/jquery-beforeafter-plugin/ [...]
The Wordpress Development Team at Xieno has acquired a growth along with the growth of Wordpress itself. Our team is capable of providing almost any kind of solution, possible, in Wordpress. Despite of its powerful Bloging opportunity our Wordpress portfolio is consist of eCommerce Solutions, Photo Gallery, Social Networking, Link Directory, CMS enabled Informative Portal etc.
[...] URL: http://www.catchmyfame.com/2009/06/25/jquery-beforeafter-plugin/ [...]
[...] a look at this plug-in here. For the demos [...]
[...] a look at this plug-in here. For the demos [...]
[...] realizando un proyecto en el que debas mostrar en imágenes el antes y el después seguramente CatchMyFame te sera muy útil y mostraras un resultado bastante profesional en tu proyecto [...]
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
[...] before-after (önce -sonra) – demo – download photoshop’ta düzenlemi? oldu?unuz [...]
[...] jQuery before-after plugin [...]
[...] remodelers can show the before and after images of projects and on and on. The plugin created by Catch My Fame and plugin size only 7k and can be used multiple times on a [...]
Great!
[...] ve isterseniz ücretsiz bir ?ekilde indirip kullanabilirsiniz. Umar?m i?inize yarar. Orjinal Makaleye Git Demoyu Gör jQuery Eklentisini [...]
[...] ve isterseniz ücretsiz bir ?ekilde indirip kullanabilirsiniz. Umar?m i?inize yarar. Orjinal Makaleye Git Demoyu Gör jQuery Eklentisini [...]
[...] jQuery Framework Demo: http://www.catchmyfame.com/2009/06/25/jquery-beforeafter-plugin/ License: Creative Commons [...]
[...] Catch My Fame » jQuery Before/After Plugin (tags: jquery plugin before after image photos ui webdesign effect) [...]
[...] ?urada yer alan DEMO ile nas?l çal??t???n? test edebilirsiniz, detayl? anlat?m için jQuery Before/After Plugin için haz?rlanan yaz? içeri?ini inceleyebilirsiniz. Türkçe anlat?m için [TR] [...]
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.
[...] al plugin Before/After, implementato da Catch My Frame, vedremo quanto è semplice ottenere un effetto come quello che hai visto nell’esempio, [...]
Hi,
Can you provide same sort of plugin that should work for html content. lets say there are two tables, and i want to show the changes among those two tables.
I think u have understood,
Thanks
@Venki
I’ll leave that for someone else to try.
[...] Den Download und wie das Ganze aussieht, findest du auf der Catch my Fame Seite. [...]
[...] şurada yer alan DEMO ile nasıl çalıştığını test edebilirsiniz, detaylı anlatım için jQuery Before/After Plugin için hazırlanan yazı içeriğini inceleyebilirsiniz. Türkçe anlatım için [TR] [...]
I have this script working well, but I am trying to set it up so I can dynamically replace the images in the before & after. Right now I have a script that works perfectly for swapping both images, but it doesn’t carry over to the beforeAfter script. Attempting to call .beforeAfter after the swap just makes it a mess. Is there any way to accomplish this?
Nevermind. I found the issue. The random value added to the image IDs is what threw me. I just removed that and made sure the ID is unique throughout the site and it’s working like a charm. Thanks much for the wonderful plugin!
Hi,
Has anyone tried implementing this into a lightbox yet? I have tried with pretty photo, and highslide with no such luck. I thought it would be a neat effect. If anyone has any suggestions please let me know. Thanks
Brilliant Idea. But here are my 0,02 $: It would be a good Idea to have the phrases as optional parameters, so I could use it in my german website, too! Perhaps we could define the options only one time for all before/after divs on one page.
Why not just change it in the plugin so it’s permanent for you? I mean it’s not like you’ll need to change languages all the time.
[...] Podéis ver el plugin aquí [...]
God …really awesome
nice collect it to
ajax.wespai.com
[...] // Demo // Descarga [...]
[...] jQuery Before/After, This plug-in shows the difference between two images simply dragging a slider over the two images which are sandwiched with one on top of the other. [...]
This is amazing. great!
[...] Catch My Fame Technorati-Tags: JQuery,Plugin [...]