时间戳

首页 > 解决方案 > 替换图库图像的 Ajax 调用后 lightGallery 无法正常工作

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

问题描述

我安装了一个 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>

标签： javascriptjqueryajaxsliderlightgallery

解决方案

添加新项目后，您需要销毁并重新启动 lig​​htGallery。

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

秒文件.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

推荐阅读