Fancybox,自定义开放转换

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

http://fancyapps.com/fancybox/

我希望实现类似的转换到这里找到的示例:

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

我喜欢显示插件,但它没有得到fancyBox为新项目所做的一些function

非常感谢,

山姆

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

要获得相同的打开效果,请尝试以下选项:

openMethod : 'changeIn' 

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

 nextMethod: 'changeIn' 

添加自定义过渡 –

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

而且 – 哇 – 同样的效果!

对于现在读这篇文章的人来说,我写了一个jQuery Fancybox插件,其中包括Janis(Fancybox的作者)为回答这个问题所写的过渡,以及其他一些过程,它有望继续发展。

请参见: jquery.fancybox.transitions.js

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

    

GitHub存储库中的更多信息。

好吧,我的建议是,除非你知道如何自己从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/