Slick Lightbox无法加载AJAX调用后获取的图像

Question

我当前正在使用滑动灯箱插件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();