2

我正在尝试使用以下代码覆盖 fancybox 默认设置：

jQuery.extend(jQuery.fancybox.defaults, {
    padding: 25,
    margin: [20, 65, 20, 65]
});

它工作完美。但是当我尝试覆盖这样的模板选项时，它停止工作：

jQuery.extend(jQuery.fancybox.defaults, {
    padding: 25,
    margin: [20, 65, 20, 65],
    tpl: {
        closeBtn: '<a href="javascript:;">custom code</a>',
        next: '<a href="javascript:;" >custom code</a>',
        prev: '<a href="javascript:;">custom code</a>'
    }
});

有什么问题？

4

2 回答 2

2

这个想法是扩展“tpl”属性本身。我的代码如下所示：

$.extend($.fancybox.defaults.tpl, {
    closeBtn: '<a class="custom" href="javascript:void(0);">custom</a>'
});

我还像这样扩展“默认”属性：

$.extend($.fancybox.defaults, {
    closeBtn: true,
    openEffect: "none",
    closeEffect: "none",
});

这就是我使用的。希望它会有所帮助。

于 2014-01-17T18:49:04.213 回答
0

您必须声明每个模板代码，因为如果您更改了 fancybox 默认值，整个“tpl”变量将被覆盖。这样，您将无法使用任何花式框窗口，因为 javascript 代码不会保留其他模板。

因此，您必须以这种方式覆盖每一个：

$.extend($.fancybox.defaults, {
    tpl: {
        wrap     : '<div class="fancybox-wrap" tabIndex="-1"><div class="fancybox-skin"><div class="fancybox-outer"><div class="fancybox-inner"></div></div></div></div>',
        image    : '<img class="fancybox-image" src="{href}" alt="" />',
        iframe   : '<iframe id="fancybox-frame{rnd}" name="fancybox-frame{rnd}" class="fancybox-iframe" frameborder="0" vspace="0" hspace="0"></iframe>',
        error    : '<p class="fancybox-error">The requested content cannot be loaded.<br/>Please try again later.</p>',
        closeBtn : '<a title="Close" class="fancybox-item fancybox-close" href="javascript:;"></a>',
        next     : '<a title="Next" class="fancybox-nav fancybox-next" href="javascript:;"><span></span></a>',
        prev     : '<a title="Previous" class="fancybox-nav fancybox-prev" href="javascript:;"><span></span></a>'
    }
});

当然可以修改上面的代码！

于 2013-12-16T17:30:10.597 回答