sachinchoolur / lightGallery

A customizable, modular, responsive, lightbox gallery plugin.
https://www.lightgalleryjs.com/
Other
6.47k stars 1.28k forks source link

masonry.js filtering and lightgallery #1650

Open musicjunk opened 2 months ago

musicjunk commented 2 months ago

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?