Transition Plugins - Defining Your Own Named Transitions

Once you understand how to fully customize transitions you may find it handy to define them by name so they can be easily resused. To show how this works I'll take an example from the last demo page, Advanced Demos (Part 1), and use its definition to create a named transition. Here's what we had:

$('#s6').cycle({
    fx: 'custom',
    cssBefore: { 
        top:  0,
        left: 0,
        width: 0,
        height: 0, 
        zIndex: 1 
    },
    animIn:  { 
        width: 200,
        height: 200 
    },
    animOut: { 
        top:  200,
        left: 200,
        width: 0,
        height: 0
    },
    cssAfter: { 
        zIndex: 0 
    }
});

Now we'll give this transition the name pinch and make it a transition plugin. If you've already looked at the transion definitions in the plugin then you probably know what's coming.

To create a transition plugin we must add a transtion definition function to the $.fn.cycle.transitions object. This function will be invoked one time and provides a hook for initializing the options object and performing any special operations needed for the new transition. The function will be passed three arguments, the container object, the slides and the options object. Both the container and slides are wrapped in a jQuery object for convenience.

The following code shows how we converted the custom transition above to a new transition plugin that has the name pinch.

$.fn.cycle.transitions.pinch = function($cont, $slides, opts) {
    var $el = $($slides[0]);
    var w = $el.width();
    var h = $el.height();
    opts.cssBefore = { top: 0, left: 0, width: 0, height: 0, zIndex: 1 };
    opts.animIn    = { width: w, height: h };
    opts.animOut   = { top: h, left: w, width: 0, height: 0 };
    opts.cssAfter  = { zIndex: 0 };
};

And here's how we use it:

$('#s1').cycle('pinch');

$('#s2').cycle({ fx: 'pinch', delay: 2000 });