How to destroy and re-initialise lightgallery.js

Question

I am using lightgallery on my page, which is working fine. I have added a filter function to the gallery, so now need to destroy and rebuild my lightgallery to reflect the change in the gallery content. I have this so far:

source.js

import 'lightgallery.js';


var gallery = document.getElementById('gallerywrapper');

  if(gallery) {
    lightGallery(gallery, {
      download: false,
      counter: false,
      selector: '.item.active'
    });
  }

  var galleryFilterButtons = document.querySelectorAll('.gallery-filter-button');

  for(var i = 0; i<galleryFilterButtons.length; i++) {
    galleryFilterButtons[i].addEventListener("click", function(){
      // destroy and rebuild here...
    });
  }

I can't get the destroy function to work at all, can anyone give any pointers?

Answer 1

The documentation shows that you can destroy with this:

 window.lgData[gallery.getAttribute('lg-uid')].destroy(true);

and then just init again. So in your case it would be:

for (var i = 0; i < galleryFilterButtons.length; i++) {
    galleryFilterButtons[i].addEventListener("click", function(){
        window.lgData[gallery.getAttribute('lg-uid')].destroy(true);
        lightGallery(gallery); 
    });
}

You can see a use case here .