In late April, we added screenshots to the Realized-app product tour. Our design drew upon an idea we saw at AgileZen.com, where clicking a thumbnail expands into a larger screenshot lightbox.

The Realized-app already makes use of jQuery, mainly for client-side processing of stock ticker choices. To animate our screenshots, we adopted the jQuery plugin that AgileZen uses, Fancybox. Our configuration:

$(document).ready(function() {
  $(".fancybox > a").fancybox({
    'hideOnContentClick':true,
    'titleShow':false,
    'transitionIn':'elastic',
    'transitionOut':'elastic',
    'speedIn':800,
    'speedOut':800,
    'easingIn':'easeInOutExpo',
    'easingOut':'easeInOutExpo'
    . . .

One interesting aspect of configuring Fancybox is its support of the Easing plugin to control the transitions. Easing controls how an animation progresses over time by varying its acceleration, giving each transition a more natural effect.