What you see above is an example of the beforeAfter jquery plugin in use. If you drag the controls overlaid on the image to the left or right, click anywhere in the image ((Clicking rather than dragging the controls works just fine on iPhone/iPad.)), or click the links just below the image, you’ll be able to compare the graded and ungraded looks of a frame from a short film I graded a couple of months ago. ((Yes, I really did track a “power window” to the actress’s face, matte-ing a selective color adjustment, to restore/enhance the blue color of her eyes. Thanks for asking.))

beforeAfter was written by admin at catchmyfame.com. You can find the original code, see some demonstration images, and read up on his reasons for developing the plugin in his blog post about beforeAfter.

I was very happy to come across this plugin. I’ve wanted for a while to be able to post before-and-after examples like this to my blog to demonstrate film grading and photo editing work, and this was nearly exactly what I needed. I took the code, wrapped it into a WordPress plugin, and modified it to add a few features. Since I was to benefit from code released freely into the wild by its author, it’s only natural to release the modifications. The beforeAfter wordpress plugin I’ve constructed can be downloaded here:

http://zachfine.com/beforeAfter_wp.tar.gz

I wrote the plugin’s original author to ask for his blessing before releasing this altered version of beforeAfter, and he agreed. Below are excerpts from that email message, which explain my alterations to the code and also contains some instructions on how to use the plugin:

<email message>
On Mon, Jul 19, 2010 at 2:53 PM, Zach wrote:
Hello there,

I was extremely happy to find your jquery beforeAfter script on the net. I’ve wanted for a while to post before and after images to my blog that help show people how to make adjustments to photos or grade video footage, beforeAfter seems like a fantastic way to do that.

I constructed a wordpress plugin based on your script and installed it on my server. It worked very well, but I realized while testing it that the following additional features would be very useful to me (and possibly to others as well):

• the ability to have an arbitrary number of instances of beforeAfter containers per page
• the ability to set custom “Show only before” and “Show only after” text strings via custom attribute in the container’s html.
• the ability to set a custom initial wipe starting point via custom attribute in the container’s html. The reason for this is that I want the beforeAfter controller and its function to be instantly obvious to visitors, so I want to manually place the initial wipe point over the area of greatest between-image contrast — or I might want to place the wipe point over the area I mean to emphasize.

So I read up on javascript and jquery and made a few modifications. It was only after making these modifications that I noticed the script’s license stipulates “No Derivative Works”. I think this means I can’t use the modifications I’ve made unless you give me approval to use my modified version of your script, though I could be wrong. I was planning on sending you these modifications regardless, thinking that in the best-case scenario you might like the modifications and/or make them available to others.

My mods to the script:

Example of container html: ((Yeah, the formatting doesn’t look so hot after it’s wrapped by your web browser, but you should have seen it before! The demo of the plugin at the top of this blog post can serve as a more readable example –see the html code of the post.))

<div class="container" data-wipeto="35" data-beforetext="original" data-aftertext="graded" data-animateintro="true" data-introdelay="3000" data-introduration="3000">
<div><img alt="ungraded" src="http://zachfine.com/blog/wp-content/uploads/2010/07/LB-01-00-57-05-original.jpg" height="254" width="450" /></div>
<div><img alt="graded" src="http://zachfine.com/blog/wp-content/uploads/2010/07/LB-01-00-57-05-graded.jpg" height="254" width="450" /></div>
</div&

Note that I’ve set the user configuration settings above using valid html5 custom attributes. In this manner each container can have its own settings. The html5 spec requires that custom attributes be lowercase and begin with “data-“. Unfortunately this means no camelCasing, which cuts down on the readability of variable names. Maybe underscores are allowed?

Because my goal was to allow an arbitrary number of beforeAfter containers on a page, I’ve changed the jquery selectors in the script to look for divs of class “container”, rather than id “container”. I’ve always used id’s to single out individual design elements on a page, and classes for a class of elements. I could be wrong about this paradigm.

This html produces the following

Redundant image removed —see demo at top of this blog post, it’s a working example of the result of that container’s html.

Any beforeAfter settings not set by the user in the html will get the defaults. The “wipeto” point will be set to “50” (out of 100), the “beforetext” will be set to “Show only before”, etc.

Here’s the jquery code I use to iterate through each of the the divs of class “container” in the DOM, iterating through each div’s custom attributes to construct an object of options, and then calling the beforeAfter plugin on that div and passing it the set of user-set options:

<script type="text/javascript">
$(function(){
   $('div.container').each(function (index) {
      var $div = $(this);

      var userOptions = {};
      $.each(this.attributes, function(i, attrib) {
             if( /^data-/.test(attrib.name) ) {
              userOptions[attrib.name.replace(/data-/g, '')] = attrib.value;
              }
      });

// Adding just one more option to the object of arguments:                      
      userOptions['imagepath'] = '<?php echo WP_PLUGIN_URL . "/beforeafter/js/"; ?>';

      $div.beforeAfter(userOptions);
   });
});
</script>

This bit of script is in my wordpress plugin, with more comments, here: http://zachfine.com/blog/wp-content/plugins/beforeafter/beforeAfter-source.php

I made a few of changes to the jquery.beforeafter.js script to make use of the new “wipeto”, “beforetext”, and “aftertext” vars, and to remove camelCasing from the options/defaults vars to be consistent with the html5 custom attributes.
My altered version is available here: http://zachfine.com/blog/wp-content/plugins/beforeafter/js/jquery.beforeafterZ.js
</email message>

I plan to use this plugin quite a bit in the near future. I hope you all enjoy using it as well. Thanks again to admin at catchmyfame.com for writing the original plugin and allowing me to distribute and use this modified version.