Question

我正在循环使用每个元素，因此我可以更改href值，但是使用此值，我无法对图像进行分组。 rel无效。

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

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

Answer 1

如果$(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
});

...该插件需要 valid 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
});

如何在单个元素上使用fancybox？

1 个答案: