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

Well my advice is that unless you know how code one yourself from JQuery then you're best bet is to keep looking around the net until you can settle for something.

If you are looking at maybe remaking or extending one of these plugins then a good book to read is JQuery: Novice to Ninja, check it out on Amazon. There are lots of good tips and tricks in there.

http://www.amazon.co.uk/jQuery-Novice-Ninja-Earle-Castledine/dp/0980576857/ref=sr_1_1?ie=UTF8&qid=1322832342&sr=8-1

Generally though you wouldn't want to re-invent the wheel. So heres a couple of links to JQuery Lightbox plugins

http://www.designyourway.net/blog/resources/30-efficient-jquery-lightbox-plugins/ http://webdesign14.com/30-best-jquery-lightbox-plugins/

Answer 2

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!

Answer 3

For anyone reading this now, I've written a jQuery Fancybox plugin that includes the transitions Janis (Fancybox's author) wrote to answer this question, as well as a few others, and it hopefully will continue to evolve.

See here: jquery.fancybox.transitions.js

Include the javascript file in a script tag after jQuery and Fancybox

<script src="path to jquery"></script>
<script src="path to fancybox"></script>
<script src="jquery.fancyboxbox.transitions.js"></script>

More information in the GitHub repository.

Answer 4

Fancybox can have the same opening effect as in the sample you provided but not the same closing effect though.

To achieve the same opening effect, try this option:

openMethod : 'changeIn'

to keep the same effect during transition between galleries, try this option:

nextMethod: 'changeIn'

.