使用href的Fancybox2组

Fancybox2 groups using href

本文关键字：Fancybox2 href 使用      更新时间：2023-09-26

从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 的用户提供一个合适的回退。相反，我使用以下代码创建花哨的盒子：

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

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

这个问题有解决方案吗？

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

我还没有完全分析剧本来告诉你到底发生了什么。

但我能说的是，您可以完全删除 .each() 方法并在beforeLoad回调中动态获取imgID的值。然后从数组中设置相应的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

请注意，我们需要减去 ID 的1，因为 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

相关文章：