masonry.js filtering and lightgallery

[musicjunk]

Masonry.js and lightbox is working fine together as far I see, but with masonry-filtering not. I tried to use masonry.js to order the images and use filter (categories) buttons to select and reorder the images by category. After that open the lightgallery only with the previously choosen category-images. The initialation of lightgallery:

 lightGallery(document.getElementById('ac-gridbox-1'), {
    selector: '.ac-lg-item',
        plugins: [lgThumbnail],
        licenseKey: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxx',
        speed: 500,
    subHtmlSelectorRelative: true,
    });

So I tought the best way is, to remove the selector class that is used to detect the lightgallery image items. As you can see below, by clicking the filter button the selector: '.ac-lg-item', class was removed from the hidden images. But I don't know how to reset or refresh the new imageset in lightgallery correctly. I tried to make a refresh when a filter button is clicked but it does not work. Do the filtering:

$("#filter .lg-filter-buttons").click(function() {
    var group = $(this).data('category');
var group_class = "." + group;

    if(group == "*"){
        $(".ac-item").show();
        $('.ac-gridbox').masonry('layout');
       }
    else if(group != "") {
        $(".ac-item").hide().removeClass('ac-lg-item');
        $(group_class).addClass('ac-lg-item').show();
        $('.ac-gridbox').masonry('layout');
        var aclg = document.getElementById('ac-gridbox-1');
        aclg.refresh(); 
    } else {
        $(".ac-item").show();
        $('.ac-gridbox').masonry('layout');
    }
});

So still all images are shown when the lightgallery overlay is open. How could it be done to only open images that still have class "ac-lg-item" in the lightgallery overlay? can someone help please?

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.