Question

有谁知道如何使用自定义开放转换打开fancyBox：

http://fancyapps.com/fancybox/

我希望实现与此处示例相似的过渡：

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

我喜欢显示插件，但它没有我需要fancyBox为新项目做的一些功能

非常感谢，

萨姆

Answer 1

添加自定义转场 -

(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));

像 -

一样使用它们

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

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

哇哇哇 - 同样的效果！

Answer 2

对于现在读这篇文章的人来说，我写了一个jQuery Fancybox插件，其中包括Janis（Fancybox的作者）为回答这个问题所写的转换，以及其他一些问题，希望它会继续发展。

见这里：jquery.fancybox.transitions.js

在jQuery和Fancybox之后的javascript文件中包含javascript文件

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

GitHub存储库中的更多信息。

Answer 3

Fancybox可以具有与您提供的样本相同的打开效果，但不会产生相同的结束效果。

要获得相同的开场效果，请尝试以下选项：

openMethod : 'changeIn'

要在图库之间转换期间保持相同的效果，请尝试以下选项：

nextMethod: 'changeIn'

Answer 4

我的建议是，除非你知道如何从JQuery自己编写代码，否则你最好的选择是继续环顾网络，直到你能够满足于某种程度。

如果您正在考虑重建或扩展其中一个插件，那么一本好书可以阅读JQuery：Novice to Ninja，在亚马逊上查看。那里有很多好的提示和技巧。

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

一般来说，你不想重新发明轮子。所以有几个链接到JQuery Lightbox插件

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

Fancybox，自定义开放转换

4 个答案: