TypeError: $(...).lightGallery(...).destroy is not a function

Question

I am getting this error from firefox:

TypeError: $(...).lightGallery(...).destroy is not a function

I am using following plugin for play video and show image gallery https://github.com/sachinchoolur/lightGallery.

I want re-initialize lightGallery because I am using ajax to add element dynamically in container. It was working fine with previous version of lightGallery but it is not working with current version.

I am using following code.

// destroy previous gallery
$("#lightGallery2").lightGallery({
  selector : '.image_gallery',
  videojs: true,
  download: false
}).destroy();

// re-initialize
$("#lightGallery2").lightGallery({
  selector: '.image_gallery',
  videojs: true,
  download: false
});

Please suggest.

Thanks

Log a bug if you think it is one: https://github.com/sachinchoolur/lightGallery/issues — epascarello, Sep 18 '15 at 11:21

score 9 · Accepted Answer · edited Jun 20 '16 at 19:13

9

The following code works for me:

$lg.on('onBeforeClose.lg',function(event, index, fromTouch, fromThumb){
    try{$lg.data('lightGallery').destroy(true);}catch(ex){};
});

edited Jun 20 '16 at 19:13

Tony Hinkle

4,706
7
23
35

answered Jun 20 '16 at 18:47

2 aspects from this were important for me, you must access the object via the data property bag `$("#lightGallery2").data('lightGallery')` and I had to pass true as a parameter to destroy => `$("#lightGallery2").data('lightGallery').destroy(true);` – Chris Schaller Apr 05 '18 at 05:39

Behzad · Answer 2 · 2016-03-30T12:03:45.747

For destroy data you should add data attribute to your gallery then destroy it, for example if you apply gallery to all links:

var myGallery = 'body',
    lightgallery = function() {
         $( myGallery ).attr('data-lightGallery', '1');
         $( myGallery ).lightGallery({selector: 'a[href$=".jpg"], a[href$=".jpeg"], a[href$=".png"], a[href$=".gif"]'});
    };

Then:

$( myGallery ).data('lightGallery').destroy(true);
lightgallery();

score 0 · Answer 3 · answered Sep 18 '15 at 11:19

0

If it is written like most plugins/widgets, you should be calling the destroy method like this.

$("#lightGallery2").lightGallery("destroy");

answered Sep 18 '15 at 11:19

epascarello

204,599
20
195
236

score 0 · Answer 4 · answered Sep 19 '15 at 02:28

0

You have to use the following method to destroy lightgallery version 1.2.x.

var $lg = $('#lightGallery2');

$lg.lightGallery({
  selector : '.image_gallery',
  videojs: true,
  download: false
});

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

Here is the docs

answered Sep 19 '15 at 02:28

Clr

687
7
11

Hi Thanks for your reply. but it still not working it showing following error. TypeError: $lg.data(...) is undefined – Pramod Kumar Sep 23 '15 at 11:35

score 0 · Answer 5 · edited Nov 22 '21 at 16:00

0

I simply created a global variable. It allows me to perform the desired function.

var PLUGIN; // global variable
...
if(PLUGIN) PLUGIN.data('lightGallery').destroy(true); // destroy 
PLUGIN = $("#lightGallery2").lightGallery();

edited Nov 22 '21 at 16:00

Eric Aya

69,473
35
181
253

answered Nov 22 '21 at 15:17

Istvan Ozsvar

1
1

TypeError: $(...).lightGallery(...).destroy is not a function

5 Answers5

Linked