To 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 solution. The main issue with jQuery.beforeafter is that it is styled with absolute positions, which destroys the whole structure when the user resizes his browser after having loaded the page.

Here is our solution: J&D beforeAfter, entirely scripted in Flash. All you need is the .swf file and the right embedment (which means using swfobject, of course):

<div id="ba_container">
  <script>
    swfobject.embedSWF("beforeafter.swf", "ba_container", "500", "200", "8.0.0", "ba_container", { "before" : "before.jpg", "after" : "after.jpg", "width" : 500, "height" : 200 }, { "allowScriptAccess" : "always" }, { "wmode" : "opaque", "swliveconnect" : true } );
  </script>
</div>

Don’t forget to put the parameters in quotation marks, we’ve talked about that here. Just as jQuery.beforeafter, you can address our script via Javascript and make it show only the before or the after image by calling the function showBefore() and showAfter().

Download the whole source package here and use it for your own comparisons! We didn’t bother documenting the scripts as we built it without the intention of future extension, but the code is not messy at all.

.

Jake & Dan