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

Question

I'm looping trough each element so I can change the href value, but with this, I can't group the images. rel is not working.

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

How can I group them if I do it like this? If not, is it possible to have fancybox on .category and at the same time set the href for each element?

Answer 1

If $(element) is an anchor (<a> tag), try this instead

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

because, when you do

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

... the plugin is expecting valid API options and rel is not one of them.

---

On the other hand, if $(element) is an <img> tag (because I see you are querying thumbnails), then you rather try

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

Notice class requires to be in quotes because it's a reserved javascript word

The code above still may need a fancybox initialization code like

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