Question

我正在尝试使用以下代码覆盖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>'
    }
});

有什么问题？

Answer 1

这个想法是扩展“tpl”属性本身。我的代码看起来像这样：

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

我还扩展了“defaults”属性，如下所示：

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

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

Answer 2

您必须声明每个模板代码，因为如果更改fancybox默认值，整个“tpl”var将被覆盖。这样，您将无法使用任何fancybox窗口，因为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>'
    }
});

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

Fancybox 2默认覆盖

2 个答案: