jquery - 调用不同类的 fancybox 时保持相同的画廊

Question

我需要在页面上以两种不同的方式调用 fancybox - 一种使用“fitToView : false”，另一种使用“fitToView : true”。我希望将这些图像放在同一个画廊中，但由于它们是从两个单独的 fancybox 函数中调用的，因此不允许它们表现得好像它们位于同一个画廊中一样。有没有办法动态应用“fitToView : false”或其他解决方案来帮助我实现我想要的目标？

这是我的两个功能:

$('.fancybox')
    .attr('rel', 'gallery')
    .fancybox({
        padding : 5,
        fitToView : true,
        openEffect  : 'elastic'
    });
$('.fancyboxer')
    .attr('rel', 'gallery')
    .fancybox({
        padding : 5,
        fitToView : false,
        openEffect  : 'elastic'
    });

Answer 1

您可以 extend 每个元素的 fancybox API 选项使用 afterLoad回调。

但首先，您需要一种方法来区分哪些元素将具有 fitToView设置为false (默认值为true)

您可以通过设置特殊的 class 来实现此目的在绑定(bind)到 fancybox 的 anchor 中(实际上，您将使用 single class 来调用所有元素的 fancybox)，例如:

<a class="fancybox" href="{target}">open image with fitToView : true (default)</a>
<a class="fancybox nofit" href="{target}">open image with fitToView : false</a>

注意第二个元素的类为 nofit ;然后在afterLoad内回调，评估当前元素是否具有类 nofit并扩展选项 fitToView设置为false如果是这样的话:

$(function () {
    $(".fancybox")
    .attr("rel", "gallery")
    .fancybox({
        padding : 5,
        openEffect  : 'elastic',
        afterLoad: function () {
            if ($(this.element).hasClass("nofit")) {
                $.extend(this, {
                    fitToView: false
                });
            }
        }
    });
});

参见JSFIDDLE