如何销毁和重新初始化lightgallery.js

Question

我在页面上使用lightgallery，它运行良好。我已经为图库添加了一个过滤功能，所以现在需要销毁和重建我的lightgallery，以反映图库内容的变化。到目前为止，我有这个：

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...
});
}

我根本无法让destroy函数工作，有人能给出任何指针吗？

Answer 1

文档显示您可以使用以下方法销毁：

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

然后再次初始化。所以在你的情况下，它会是：

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

你可以在这里看到一个用例。