javascript - Ajax调用替换图库图像后，lightGallery无法正常工作

我安装了lightGallery，在加载页面时效果很好。

但是，当我执行Ajax调用以更新lightGallery图像时，lightSlider不起作用。

我的问题是我可以在Ajax之后更新内容并全屏查看图像，但是每次执行此Ajax调用时，这些行都会重新初始化。

enter link description here

换句话说，在HTML中，我遇到以下问题：



在我的文件main.js中，将其初始化：

main.js

    const settings = {
    gallery:true,
    item:1,
    loop:false,
    thumbItem:4,
    slideMargin:0,
    enableDrag: true,
    currentPagerPosition:'left',
    onSliderLoad: function(el) {
        el.lightGallery({
            selector: '#imageGallery .lslide'
        });
    }
}
const slider = Main.selectors.gallery.find('ul').lightSlider(settings);

Main.selectors.gallery.addClass('init');//I added this line to be able to view the list of images as slides

在我的secondFile.js中，我调用了Ajax调用，并成功地更新了图库的图像

secondFile.js

success: function (response) {
                        if($('#imageGallery').html().length != 0 && response.responseDto.mediaProps.length != 0) {
                $('#imageGallery').empty();
            }
            if (response.responseDto.mediaProps.length != 0) {
                $.each(response.responseDto.mediaProps, function(i, item) {
                    $('#imageGallery').append('<li class="lslide" style="width: 411.656px; margin-right: 0px;" data-thumb="' + item + '" data-src="' + item + '"><img src="' + item + '"></li>');
                });
            }

            if (response.responseDto.videoProps.length != 0 && response.responseDto.videoProps[0] != null) {
                $.each(response.responseDto.videoProps, function (i, item) {
                    $('#imageGallery').append('<li class="lslide" style="width: 411.641px; margin-right: 0px;" data-thumb= "http://www.monitor.co.ug/image/view/-/688914/data/54/-/euvqa8z/-/video.gif" data-poster="http://www.monitor.co.ug/image/view/-/688914/data/54/-/euvqa8z/-/video.gif" href=' + item + '><img src="http://www.monitor.co.ug/image/view/-/688914/data/54/-/euvqa8z/-/video.gif"><span class="icon-youtube"></span></li>');
                });
            }

            // Destroy lightSlider and lightGallery
            Main.selectors.gallery.find('ul').data('lightGallery').destroy(true);
            slider.destroy();

            // re-initialize
            Main.selectors.gallery.find('ul').lightSlider(settings);

/*          if (initial) {
                Main.initProductDetails();
            }*/

该lightSlider的内容位于div内部，名称为“ imageGallery”

            <div class="col-sm-12 col-md-7">
            <div class="field field-gallery">
                <ul id="imageGallery"></ul>
            </div>
        </div>

最佳答案

附加新物品后，您需要销毁并重新启动lightGallery。

main.js

const settings = {
        gallery:true,
        item:1,
        loop:false,
        thumbItem:4,
        slideMargin:0,
        enableDrag: true,
        currentPagerPosition:'left',
        onSliderLoad: function(el) {
            el.lightGallery({
                selector: '#imageGallery .lslide'
            });
        }
    }
const slider = Main.selectors.gallery.find('ul').lightSlider(settings);

seccondFile.js

success: function (response) {
    if($('#imageGallery').html().length != 0 && response.responseDto.mediaProps.length != 0) {
        $('#imageGallery').empty();
    }
    if (response.responseDto.mediaProps.length != 0) {
        $.each(response.responseDto.mediaProps, function(i, item) {
            $('#imageGallery').append('<li class="lslide" style="width: 411.656px; margin-right: 0px;" data-thumb="' + item + '" data-src="' + item + '"><img src="' + item + '"></li>');
        });
    }

    if (response.responseDto.videoProps.length != 0 && response.responseDto.videoProps[0] != null) {
        $.each(response.responseDto.videoProps, function (i, item) {
            $('#imageGallery').append('<li class="lslide" style="width: 411.641px; margin-right: 0px;" data-thumb= "http://www.monitor.co.ug/image/view/-/688914/data/54/-/euvqa8z/-/video.gif" data-poster="http://www.monitor.co.ug/image/view/-/688914/data/54/-/euvqa8z/-/video.gif" href=' + item + '><img src="http://www.monitor.co.ug/image/view/-/688914/data/54/-/euvqa8z/-/video.gif"><span class="icon-youtube"></span></li>');
        });
    }

    // Destroy lightSlider and lightGallery
    Main.selectors.gallery.find('ul').data('lightGallery').destroy(true);
    slider.destroy();

    // re-initialize
    Main.selectors.gallery.find('ul').lightSlider(settings);



    if (initial) {//If Ajax call was NOTTTT performed
        Main.initProductDetails();
    }
}

文件：lightSlider-http://sachinchoolur.github.io/lightslider/examples.html

文件：lightGallery-http://sachinchoolur.github.io/lightGallery/demos/methods.html

关于javascript - Ajax调用替换图库图像后，lightGallery无法正常工作，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/52945579/