Fancybox, Custom Open Transition

寵の児 提交于 2019-11-29 00:46:36

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'

.

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!

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.

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/

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!