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>