2

我需要在页面上以两种不同的方式调用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'
    });
4

1 回答 1

1

您可以使用回调为每个元素扩展fancybox API 选项。afterLoad

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

您可以通过在绑定到 fancybox 的锚点中设置一个特殊class的来实现这一点（您实际上将调用 fancybox 并为所有元素使用一个），例如： class

<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为falseif so like：

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

见JSFIDDLE

于 2013-03-29T08:03:01.150 回答