Lightgallery: Unable to destroy lightGallery

[donenvy]

How does one destroy the lightGallery? I have so far tried all possible answers I could find on the net but none of them work?

    $('.button').click(function(e){ 
        e.preventDefault();
        var $cl = $(this).lightGallery({
            download : false,
            counter: false,
            //height: '100%',
            //width: '100%',
            dynamic: true,
            escKey: false,
            dynamicEl: [{
                "src": 'http://google.com',
                'iframe' : true
            }]
        });     

        $cl.on('onCloseAfter.lg',function(event, index, fromTouch, fromThumb){  
            //$(this).lightGallery('destroy');
            //$(this).lightGallery().destroy(); 

            //this option closes and automatically reinitializes and opens the lightGallery again
            //$cl.lightGallery('destroy');

        }); 

        //$cl.lightGallery().destroy(true); 


    });

[dimondevs]

http://sachinchoolur.github.io/lightGallery/docs/api.html#methods
Proper way to destroy the gallery:
$lg = $('.container');

// destroy
$lg.data('lightGallery').destroy(true);

[donenvy]

Hi d6233, I already tried that and it didn't work, it came up with an error message that $(this).data('lightGallery').destroy(true); is not a recognized function. How would this be done using the example I provided where lightgallery is initiated dynamically and then to destroy on close event?

[donenvy]

I just tried this using the destroy and it still didn't work.
I got this error:
TypeError: $cl.data(...) is undefined
$cl.data('lightGallery').destroy(true);

This is the code I used

$('.button').click(function(e){ 
    e.preventDefault();
    var $cl = $(this).lightGallery({
        download : false,
        counter: false,
        dynamic: true,
        escKey: false,
        dynamicEl: [{
            "src": 'http://google.com',
            'iframe' : true
        }]
    });     

    $cl.on('onCloseAfter.lg',function(event, index, fromTouch, fromThumb){  
        //$cl.data('lightGallery').destroy(true);
        //$(this).data('lightGallery').destroy(true);
    }); 

});

[donenvy]

Right it seems if you attach the destroy function to a button on click it works. If you add it to "onAferAppendSlide.lg" event it also works, but if you add it to "onBeforeClose.lg" event it causes a recursive error message and if you add it to "onCloseAfter.lg" event it causes a undefined error message. Is there no way to destroy the lightgallery on close?

As I am finding using this example http://sachinchoolur.github.io/lightGallery/demos/dynamic.html on a class selector, every time a different button is clicked a new lightgallery opens a new instance, as a result any function ran in the close event also runs multiple times.

Is there no easy way to just destroy the lightgallery on close?

[donenvy]

Here is test example. http://jsfiddle.net/NDm5h/15/
If you open and close the lightgallery 3 times, using firebug you will see that on the click the function runs 3 times instead of 1. Appears as though multiple instances of the plugin is being created.

[dobromir-hristov]

I can confirm, the plugin behaves as @donenvy stated.
You cannot destroy on onCloseAfter.lg event, and if using the dynamic option, and open the plugin a few times, the content section of the popup is empty.

[sachinchoolur]

Hi guys,
The issue has been fixed in https://github.com/sachinchoolur/lightGallery/commit/2c9d01e6f0578532ae01fcbe7b0b63b3d4e1cf41. Now onBeforeClose.lg onCloseAfter.lg events won't be called on lightgallery destroy

[mervick]

I got the same error.
It caused because previously bonded handler executes several times.
For resolving this issue need to unbind onCloseAfter.lg handler

lg.on("onCloseAfter.lg", function() {
    lg.off("onCloseAfter.lg") // <-- unbind
        .data('lightGallery').destroy(true);
});

@sachinchoolur, I think it is necessary to automate this when calling destroy

even better, using one instead of on

lg.one("onCloseAfter.lg", function() {
    lg.data('lightGallery').destroy(true);
});

[emrecamasuvi]

thnx @mervick

[amitks05]

Write down the below mention script on ajax success.

Note : unitPlanslightGallery is the class or id on which we are applying the     light gallery.
var lg = jQuery('.unitPlanslightGallery');
// destroy
lg.data('lightGallery').destroy(true);

[HemantBodhai]

If you want to view multiple photos at the click of a button with the classname of that button click event, and if you want to destroy the previously viewed photo at the second click.

Write down the below mention script on ajax success.

```
var $cl = $(".doc-btn").lightGallery({
download: false,
counter: false,
thumbnail: false,
autoplayControls: false,
share: false,
controls: false,
enableDrag: true,
dynamic: true,
dynamicEl: [{
"src": URL.createObjectURL(data),
}],

                 })

                 $cl.on('onCloseAfter.lg', function(event, index, fromTouch, fromThumb) {

                     if ($(this).data('lightGallery'))
                         $(this).data('lightGallery').destroy(true);
                 });

```