Как правильно прописать код плагина в success?

Question

[moiseev17]

На сайте есть страница с бесконечным скроллом, который подгружает контент. Так же на странице есть галерея реализована с помощью плагина lightgallery. Когда страница прогрузилась плагин работает, но как только подгрузился новый контент плагин перестает работать.

Как правильно поместить код плагина lightGallery в success чтобы он каждый раз подгружал js? И верно ли я добавил данный код?

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-img').lightGallery({
    thumbnail: true,
    width: '1104px',
    height: '80vh',
    selector: '.item-image-gallery'
  });
  
  //добвляем обновление правого блока
  page.getAsideHtml(_url_aside);
  page.scrollPage();
},

Answer 1

[Spartak (Web-StyleStudio)]

//добвляем плагин галереи
  $('#gallery-img').lightGallery({
    thumbnail: true,
    width: '1104px',
    height: '80vh',
    selector: '.item-image-gallery'
  });

Вынесите этот код за пределы ajax запроса
Например так:

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

А потом в success
createLightGallery();

Comments

[moiseev17]

Могу ли я данный код вынести в другой файл, а потом добавить createLightGallery();?

[Spartak (Web-StyleStudio)]

moiseev17,
Да, если этот файл будет подключён на этой же странице

[moiseev17]

Spartak (Web-StyleStudio), Попробовал ваше решение, что-то не работает. Когда страница загрузилась, все работает, когда подгружается новый контент, данный плагин не срабатывает только в блоке, который загрузился

[Spartak (Web-StyleStudio)]

moiseev17,
Попробуйте так
В success убрать createLightGallery();
И вместо него вставить

$('#gallery-img').data('lightGallery').destroy(true);
$('#gallery-img').lightGallery();

[moiseev17]

Spartak (Web-StyleStudio), Спасибо огромное за решение, вроде бы плагин загружается, но только он загружается по новому, те параметры которые я ему указал (они прописаны выше) он их игнорирует, есть такая вот ошибка:

script.js:469 lightGallery :- data-src is not provided on slide item 1. Please make sure the selector property is properly configured. More info - http://sachinchoolur.github.io/lightGallery/demos/html-markup.html

[Spartak (Web-StyleStudio)]

moiseev17,
Укажите параметры заново

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

[moiseev17]

Spartak (Web-StyleStudio), Спасибо огромное!!!

[Spartak (Web-StyleStudio)]

moiseev17, пожалуйста)