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

Question

I am using the light gallery plugin fro my website , while running the $('#categoryImages').lightGallery().destroy(true);

I getting the console error

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

the below mentioned code snippet is my website code which am using for light gallery.

    $subcategory) { $subcategoryImage= scandir($dir.strtolower($getCategory)."/".$subcategory); unset($subcategoryImage[array_search('.', $subcategoryImage, true)]); unset($subcategoryImage[array_search('..', $subcategoryImage, true)]); foreach ($subcategoryImage as $key => $value2) { $data['subcategoryImages'][]= $dir.strtolower($getCategory)."/".$subcategory."/".$value2;?>
<li class="col-xs-6 col-sm-4 col-md-3" data-responsive=" 375, 480," data-src="">

<img class="img-responsive" src="">

Jquery code

$('body').on('click', '.category', function() {
    $('#categoryImages').lightGallery().destroy(true);
});

Does this answer your question? [TypeError: $(...).lightGallery(...).destroy is not a function](https://stackoverflow.com/questions/32650578/typeerror-lightgallery-destroy-is-not-a-function) — jasie, Jul 31 '21 at 11:28

Jagjeet Singh · Answer 1 · 2018-06-15T11:26:11.617

1

As the documentation it should be like that : http://sachinchoolur.github.io/lightGallery/docs/api.html#methods

var cI = $('#categoryImages');
cI.lightGallery();
$('body').on('click', '.category', function() {        
    cI.data('lightGallery').destroy(true);
});

Update fiddle : http://jsfiddle.net/n5w7eoxh/11/

edited Jun 15 '18 at 11:26

answered Jun 15 '18 at 10:27

Jagjeet Singh

1,564
1
10
23

Thanks for your reply , I have used which you shared "Uncaught TypeError: gal.destroy is not a function" – Gireesh T Jun 15 '18 at 10:39
Please submit your full code in fiddle, maybe i can help you – Jagjeet Singh Jun 15 '18 at 10:40
Hi Jagjeet Singh: Thanks for your reply. I have used the light gallery for my website, initial page load its working fine, on click multiple checkbox using ajax am fetching the images related to the category. If I selected more than one category the light gallery is not working. But its not displaying any errors in the console. – Gireesh T Jun 15 '18 at 10:52
Don't submit your code here, please provide fiddle http://jsfiddle.net/ – Jagjeet Singh Jun 15 '18 at 10:59
Hi Jagjeet Singh: jsfiddle.net/gireesht14/n5w7eoxh this link will open my code but its related to dyanamic php code included – Gireesh T Jun 15 '18 at 11:03
Yes but where are you try to use destroy method – Jagjeet Singh Jun 15 '18 at 11:09
Updated, check my answer – Jagjeet Singh Jun 15 '18 at 11:26
Hi Jagjeet Singh: this below code is working fine for me . Thanks for your help var gal = $('#categoryImages'); gal.lightGallery(); /... request.done(function(data) { //... $('.ajxcategoryImages').html(subcategoryImages1); //append the results gal.data('lightGallery').destroy(true);//destroy the current gallery gal.lightGallery();//create a new one /.. – Gireesh T Jun 15 '18 at 11:39

madalinivascu · Answer 2 · 2018-06-15T11:14:57.797

You need to save a reference to your initialized plugin and then call destroy on that after the ajax is complete, after you call destroy you reinitialize the plugin

var gal = $('#categoryImages');
gal.lightGallery();
/...
request.done(function(data) {
//...
$('.ajxcategoryImages').html(subcategoryImages1); //append the results 
  gal.data('lightGallery').destroy(true);//destroy the current gallery
  gal.lightGallery();//create a new one
/..

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

2 Answers2