jquery - Fancybox, Custom Open Transition

Question

Does anyone know how you open a fancyBox with a custom open transition:

http://fancyapps.com/fancybox/

Im looking to achieve a similar transition to the example found here:

http://www.zurb.com/playground/reveal-modal-plugin

I love the reveal plugin but its not got a few of the features I require that fancyBox does for a new project

Many thanks,

Sam

Answer 1

Add custom transitions -

(function ($, F) {
    F.transitions.dropIn = function() {
        var endPos = F._getPosition(true);

        endPos.top = (parseInt(endPos.top, 10) - 200) + 'px';

        F.wrap.css(endPos).show().animate({
            top: '+=200px'
        }, {
            duration: F.current.openSpeed,
            complete: F._afterZoomIn
        });
    };

    F.transitions.dropOut = function() {
        F.wrap.removeClass('fancybox-opened').animate({
            top: '-=200px'
        }, {
            duration: F.current.closeSpeed,
            complete: F._afterZoomOut
        });
    };

}(jQuery, jQuery.fancybox));

Use them like -

$(".fancybox").fancybox({
    openMethod : 'dropIn',
    openSpeed : 250,

    closeMethod : 'dropOut',
    closeSpeed : 100
});

And whoa-la - the same effect!