How to properly write the plugin code in success?

user_13932721 0
Viewed 46

The site has a page with endless scrolling that downloads the content. There is also a gallery on the page, implemented with the lightgallery plugin. When loading a page the plugin works, but after loading new content, the plugin stops working only in the content that is loaded.

How do I place lightGallery plugin code correctly so that it loads js every time? And did I add this code correctly?

Script plugin

$(document).ready(function() {
  function createLightGallery() {
    $('.gallery-img').lightGallery({
      thumbnail: true,
      width: '1104px',
      height: '80vh',
      selector: '.item-image-gallery'
    });
  }
  createLightGallery();
})

js code success

success: function(obj) {
  send = true;
  $article_list.append(obj);
  const players = Array.from(document.querySelectorAll('#videoPlay')).map(p => new Plyr(p));
  const plyrs = Array.from(document.querySelectorAll('#plyrVideo')).map(plyrs => new Plyr(plyrs));

  page.getAsideHtml(_url_aside);
  page.scrollPage();

  //js plugin
  createLightGallery();
},

This is the kind of mistake

script.js:7119 Uncaught ReferenceError: createLightGallery is not defined
    at Object.success (script.js:7119)
    at c (script.js:2)
    at Object.fireWith [as resolveWith] (script.js:2)
    at l (script.js:2)
    at XMLHttpRequest.<anonymous> (script.js:2)
jquery javascript
2 Answers

Based on an error I see that you're trying to run a function, that is defined in different scope. Is the loading method also included inside $(document).ready(function() { block?

You should place everything inside it, because in other case, code won't be able to guess where you defined createLightGallery method.

More info about JavaScript scope

Example, pseudo code solution:

$(document).ready(function() {
  function createLightGallery() {
    $('.gallery-img').lightGallery({
      thumbnail: true,
      width: '1104px',
      height: '80vh',
      selector: '.item-image-gallery'
    });
  }
  createLightGallery();

  function yourFetchMethod {
    // some code here
    success: function(obj) {
      send = true;
      $article_list.append(obj);
      const players = Array.from(document.querySelectorAll('#videoPlay')).map(p => new Plyr(p));
      const plyrs = Array.from(document.querySelectorAll('#plyrVideo')).map(plyrs => new Plyr(plyrs));

      page.getAsideHtml(_url_aside);
      page.scrollPage();

      //js plugin
      createLightGallery();
  }

  yourFetchMethod(); // or any way you trigger it
})
user_10049460

Tried to do this and it all worked out.

success: function(obj) {
  send = true;
  $article_list.append(obj);
  const players = Array.from(document.querySelectorAll('#videoPlay')).map(p => new Plyr(p));
  const plyrs = Array.from(document.querySelectorAll('#plyrVideo')).map(plyrs => new Plyr(plyrs));

  //Gallery JS
  $('#gallery-img').data('lightGallery').destroy(true);
  $('#gallery-img').lightGallery({
    thumbnail: true,
    width: '1104px',
    height: '80vh',
    selector: '.item-image-gallery'
  });

  page.getAsideHtml(_url_aside);
  page.scrollPage();
},

user_139327210
Related