In LA

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¹, 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.²

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:³

<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.

1. Clicking rather than dragging the controls works just fine on iPhone/iPad. [↩]
2. 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. [↩]
3. 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. [↩]

Edit 9/21/2010: This deal now dead. They’re now selling on Amazon for $74.99.

Because I’ve bought or browsed similar items in the past, Amazon.com just sent me an email to let me know that the “Deal of the Day” is the Ultimate Ears SuperFi 4 Noise Isolating Earphones, which they’re selling today for $39.99. The email says this is 69% off the list price. I don’t know what Amazon’s regular price for these is as they’ve already changed their price for today’s deal, but I do know that these same earbuds go for $121.10 at buy.com, and they have sold for around $80 new on eBay¹. So this really is a significant price drop for what is normally an expensive item.²

The market has gotten pretty crowded since I first started using high-quality earbuds, and this particular pair is one of many I’ve never tried, but the reviews for the SuperFi 4’s look to be promising. For half price or less they may be a good choice if you’ve been considering a set of better earbuds than those which come with the iPod/iPhone/Zune/etc.

I like and recommend using earbuds over headphones when monitoring audio recording in a noisy environment, when watching or listening to a media player on a plane or train, or when listening to media in bed³. I’ve had very good experiences with Shure earbuds and with the Future Sonics Atrios. My Shure e2c’s I bought very cheaply on an earlier deal, and I use them for running⁴. The Atrios are part of my production kit, and I also use them when traveling. The fact that earbuds block a lot of surrounding noise, just as do earplugs, allows me to concentrate on listening at lower volume and without distraction. If you’ve got the need, these might be worth looking into while they’re discounted.⁵

1. My favorite way to determine the going price for an item is to do a search on eBay for completed auctions. [↩]
2. The last sale a search turns up for this item was back in July for $59.99. [↩]
3. I’ve slept with earbuds in and iPhone alarm on before when traveling or when sharing a room to avoid waking others. [↩]
4. Which I really need to get back to doing on a regular basis. [↩]
5. Or as Amazon says, “…while supplies last.” [↩]