Slick Lightbox не загружает изображения, извлеченные после вызова AJAX

Question

В настоящее время я использую плагин slick-lightbox https://github.com/jongacnik/slick-lightbox. Я пытаюсь загружать контент в него динамически после AJAX-вызова. Но карусель не обновляется.

$('.slider-lightbox').on('click', function (e) {    
    var pageKey = 2;
    var itemId = '562A4B65A09A4215927346F8ECF67759';
    var url = '/api/threesixtyviewapi/GetAllCommunityGalleryAjax';
    $.post(url, { page: pageKey, itemId: itemId }, function (data, status) {
        var pageNumber = data.page;
        var newsItems = data.items;
        if (data.length > 0) {
            var imgGalleryBlock = '';
            for (i = 0; i < data.length; i++) {
                var imageUrl = data[i].ImageUrl;
                var videoUrl = data[i].VideoUrl;
                var thumbnail = data[i].VideoThumbnailUrl;
                var isVideo = data[i].Is360View;
                var pendingCount = data[i].pendingCount;
                if (isVideo == true) {
                    imgGalleryBlock += '<li class="video active"><a href=';
                    imgGalleryBlock += videoUrl;
                    imgGalleryBlock += ' width="400px" target="_blank"><img src=';
                    imgGalleryBlock += thumbnail;
                    imgGalleryBlock += ' alt=""/><img class="play-btn" src="/images/video-icon.svg"></a></li>';
                }
                else {
                    imgGalleryBlock += '<li class="image active"><a href=';
                    imgGalleryBlock += imageUrl;
                    imgGalleryBlock += ' width="400px" target="_blank"><img src=';
                    imgGalleryBlock += imageUrl;
                    imgGalleryBlock += ' alt=""/></a></li>';
                }
            }
            $('ul.slider-lightbox').append(imgGalleryBlock);
            window.onload = timedRefresh(000);
            pageKey++;
            $('.img-gallery-main-btn').attr('data-key', pageKey);
            if (pendingCount <= 6) {
                $('.img-gallery-main-btn').hide();
            }
        }
        else {
            $('.img-gallery-main-btn').hide();
        }
    });
});

Проблема с плагином заключается в том, что нет метода «обновления», поэтому, хотя я могу загрузить контент в DOM, он не отражается в карусели.

Пожалуйста, помогите.

Answer 1

Я думаю, что вы должны dispose и после initialize скользить с вашим selector, когда ваш Ajax закончил.

$('WhateverYourSelector').slickLightbox({
    itemSelector: 'ExampleIdOrClassOrNameOrBlaBla'
  });

Или

$('WhateverYourSelector').slick();