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

Question

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

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

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

换句话说，在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 的内容位于名称为 "imageGallery"

的 div 中

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

Answer 1

您需要在添加新项目后销毁并重新启动 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

Answer 2

我解决了我的问题。现在，每当我使用 lightSlider 时，我都会正确销毁并重新初始化它。

seccondFile.js

    if(Main.selectors.gallerySlider) {
        Main.destroyProductDetails();
    }

    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 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 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>');
        });
    }


    Main.initProductDetails();

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

lightGallery doesn't work properly after Ajax call which replaces gallery images

javascript

ajax

jquery

slider

lightgallery