Блог

Главная - Вопросы по программированию - Как повторно инициализировать lightgallery после вызова ajax

Как повторно инициализировать lightgallery после вызова ajax

#javascript #jquery #ajax #plugins #lightgallery

#javascript #jquery #ajax #Плагины #lightgallery

Вопрос:

Я использую плагин lightgallery для отображения изображений моего сайта по щелчку мыши. Я инициализировал light gallery как

 $(document).ready(function(){
    $('#lightgallery').lightGallery({
        selector: '.item'
    });
});

При загрузке документа он работает нормально. Проблема в том, что когда я загружаю больше изображений и добавляю их с помощью jquery, я хочу снова повторно инициализировать lightgallery для работы с iamges, загруженными вызовом ajax. Но lightgallery для них не работает. Он работает только для изображений, которые загружаются во время загрузки страницы.

Комментарии:

1. Пожалуйста, добавьте код, в который вы загружаете больше изображений

2. ты можешь сделать скрипку?

3. проверьте это! Это может вам помочь. codepen.io/sachinchoolur/details/QjLNMM

Ответ №1:

Это может помочь:

 function createLightGallery()
{
    $('#lightgallery').lightGallery({
        selector: '.item'
    });
}

// on document load
$(document).ready(function(){
    createLightGallery();
});

// on the AJAX request
$.ajax({ 
    url: "/get_images",
    .
    .
    success: function()
    {
         if("#lightgallery").data("lightGallery"))
             $("#lightgallery").data("lightGallery").destroy(true);
         createLightGallery();
    }
});

Ответ №2:

Это мой ответ, который работает в ajax

успех: функция () {

 //destroy your lightgallery
 try{ $('#lightgallery').lightGallery(); $('#lightgallery').data('lightGallery').destroy(true); }catch(ex){};

//and then re-initiate gallery again
$('#lightgallery').lightGallery({
    selector: '.item'
});

}

Метки: