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 使用afterLoad回调为每个元素设置fancybox API选项。

但首先，您需要一种方法来区分哪些元素fitToView设置为false（默认值为true）

您可以通过在绑定到fancybox的锚点中设置一个特殊的class来实现此目的（您实际上会为所有元素调用带有单个 class的fancybox），例如：< / p>

<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，如果是这样的话： / p>

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

参见 JSFIDDLE

在使用不同的类调用fancybox时保持相同的库

1 个答案: