Lightgallery: How to destroy and reinitialise lightgallery

Created on 3 Aug 2021  路  6Comments  路  Source: sachinchoolur/lightGallery

$("#div_id").data('lightGallery').destroy(true);

it is not working in v2 of lightgallery. how to do it?

Most helpful comment

No. destory method does not return promise as it adds a lot of polyfill for the old browsers. But it returns the time takes to destroy lightGallery completely(Since version 2.2.0-beta).

const timeout = plugin.destroy();
setTimeout(()=>{
// re-init lightGallery
},timeout)

Sorry for the confusion. I'm still working on the docs

All 6 comments

Hey @sourav54321,

Yes, this has been changed in v2.

Here is the docs - https://www.lightgalleryjs.com/docs/methods/
https://www.lightgalleryjs.com/docs/methods/#destroy

Note - If you just want to modify the slides, you can don't have to call the destroy method. You can use refresh method instead

Demo - https://www.lightgalleryjs.com/demos/infinite-scrolling/

Thanks. but how can i delete a particular instance? how to pass a div id or a class name to delete a particular gallery? like in v1 there is div_id how to pass that id in v2 destroy public method.
const plugin = lightGallery();
plugin.destroy();

If you have multiple galleries on the same page, you might need to store the instances somewhere.

For example,

const galleries = {};

const initGallery = (id, settings) => {
    galleries[id] = lightGallery(document.getElementById(id), settings);
}

const destroyGallery = (id) => {
    galleries[id].destroy();
}

initGallery('div1', {});
initGallery('div2', {mode:'fade'})

// Destroy second gallery
destroyGallery('div2')

Thanks.
i have checked it in doc ,
"In case if you want to re-initialize lightGallery right after destroying it, initialize it only once the destroy process is completed."

how can i know the destroy process is completed?is destroy method return promise?i am facing issue at reinitialise just after destroying a gallery.(only last image element is clickable and show the particular gallery, clicking on the others elements does not show the gallery, but if i reinitialise after some couple of time through console or function everything works perfectly)

No. destory method does not return promise as it adds a lot of polyfill for the old browsers. But it returns the time takes to destroy lightGallery completely(Since version 2.2.0-beta).

const timeout = plugin.destroy();
setTimeout(()=>{
// re-init lightGallery
},timeout)

Sorry for the confusion. I'm still working on the docs

Thanks for the help.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

anantheswarg881 picture anantheswarg881  路  4Comments

andrew--r picture andrew--r  路  3Comments

ghost picture ghost  路  8Comments

lyhongpon picture lyhongpon  路  4Comments

kachurun picture kachurun  路  4Comments