在单个元素上使用fancybox时，如何对其进行分组

How can I group fancybox when using it on single elements?

本文关键字：元素 单个 fancybox      更新时间：2023-09-26

我在每个元素中循环，这样我就可以更改href值，但这样我就无法对图像进行分组。rel不工作。

[].forEach.call(gallery_images_thumbnails_list.querySelectorAll('.category'), function(element){
    $(element).fancybox({
        href: element.getAttribute('data-image'),
        rel: "fancybox"
    });
});

如果我这样做，我该如何将它们分组？如果没有，是否可以在.category上设置fancybox，同时为每个元素设置href？

如果$(element)是锚点（<a>标签），请尝试使用

[].forEach.call(gallery_images_thumbnails_list.querySelectorAll('.category'), function (element) {
    $(element).attr("rel", "fancybox").fancybox({
        href: element.getAttribute('data-image')
    });
});

因为，当你做时

$(element).fancybox({
    //API options
});

插件需要有效的API选项，而rel不是其中之一。

另一方面，如果$(element)是<img>标签（因为我看到你在查询缩略图），那么你宁愿尝试

[].forEach.call(gallery_images_thumbnails_list.querySelectorAll('.category'), function (element) {
    $(element).wrap($("<a />", {
        href: element.getAttribute('data-image'),
        rel: "fancybox",
        "class": "fancybox"
    }));
});

注意类需要加引号，因为它是保留的javascript单词

上面的代码仍然可能需要像一样的fancybox初始化代码

$(".fancybox").fancybox({
    // API options
});
相关文章：