LighGallery update with Isotope after filtering

26 Views Asked by At

At the first load, LighGallery works fine but after filtering I still have all images in the LighGallery ! How can I 'update' the LightGallery with only filtered images on button clicked ?

I tried to initialize one more time LightGalley inside the 'button click' but that doesn't work !

Thanks for your help...

<div id="filter-buttons">
</div>

<div id="isotope-container">
    <div class="image filterable jour1">
        <a href="image1.jpg" class="lightbox-trigger">
            <img src="image1.jpg" alt="Image 1">
        </a>
    </div>
    <div class="image filterable jour2">
        <a href="image2.jpg" class="lightbox-trigger">
            <img src="image2.jpg" alt="Image 2">
        </a>
    </div>
    <div class "image filterable jour3">
        <a href="image3.jpg" class="lightbox-trigger">
            <img src="image3.jpg" alt="Image 3">
        </a>
    </div>
</div>

<script>
document.addEventListener("DOMContentLoaded", function () {
    var isotopeContainer = document.querySelector("#isotope-container");
    var isotope = new Isotope(isotopeContainer, {
        itemSelector: ".image",
        layoutMode: "masonry" 
    });

    var filterButtonsContainer = document.querySelector("#filter-buttons");
    var filterableImages = document.querySelectorAll(".filterable");
    var filters = [];

    filterableImages.forEach(function (image) {
        var classes = image.classList;
        classes.forEach(function (className) {
            if (className !== "image" && className !== "filterable" && filters.indexOf(className) === -1) {
                filters.push(className);
            }
        });
    });

    filters.forEach(function (filter) {
        var button = document.createElement("button");
        button.textContent = filter;
        button.addEventListener("click", function () {
            isotope.arrange({ filter: "." + filter });
        });
        filterButtonsContainer.appendChild(button);
    });

    var allGalleryItems = document.querySelector("#isotope-container");
    lightGallery(allGalleryItems,{selector:'.lightbox-trigger'});
});
</script>
0

There are 0 best solutions below