Question

从Fancybox 1切换到版本2后，分组不再起作用。我有以下HTML：

<a id="preview_1" class="preview" rel="xxl" href="this.php?picNo=1">
  <img id="previewImage_1" class="previewImage" src="1.jpg" />
</a>
<a id="preview_2" class="preview" rel="xxl" href="this.php?picNo=2">
  <img id="previewImage_2" class="previewImage" src="2.jpg" />
</a>
....

请注意，我不会将Fancybox显示的图像的URL用作上面的URL。这是因为我希望为关闭JavaScript的用户提供合适的后备。相反，我使用以下代码创建了fancybox：

$("a.preview").each(function() {
  var imgID = this.id.replace("preview_", "");
  $(this).fancybox({
    "href": imageURL[imgID], // this array is set somewhere else
    "type": "image",
  });
});

这在Fancybox 1中工作正常。当我点击其中一个链接时，Fancybox显示箭头，以便我可以单击抛出图像组。但是，在Fancybox 2中，图像不再分组。如果我单击其中一个链接，则仅显示关联的图像，而不显示该组中的其他图像（具有相同的＆＃34; rel＆＃34;）。

这个问题有解决方案吗？

Answer 1

使用.each()方法将元素绑定到fancybox（v2.x）时，它以某种方式将每个元素绑定为分离的组。

我还没有完全分析脚本，告诉你究竟发生了什么。

但我可以说的是，您可以完全放弃.each()方法，并在imgID回调中动态获取beforeLoad的值。然后从数组中设置相应的href，如：

jQuery(document).ready(function ($) {
    $("a.preview").fancybox({
        beforeLoad: function () {
            var imgID = $(this.element).attr("id").replace("preview_", "") - 1;
            this.href = imageURL[imgID];
        },
        type: "image"
    });
}); // ready

注意我们需要减去 1到ID，因为javascript 索引以0开头

参见 JSFIDDLE

注意：这适用于fancybox v2.x，但它使用正确的回调和选择器与fancybox v1.3.4同样有效：

jQuery(document).ready(function ($) {
    $("a.preview").fancybox({
        onStart: function (currentArray, currentIndex) {
            var imgID = $(".preview").eq(currentIndex).attr("id").replace("preview_", "") - 1;
            this.href = imageURL[imgID];
        },
        type: "image"
    });
}); // ready

参见 JSFIDDLE

使用href的Fancybox2组

1 个答案: