lightGallery не работает должным образом после вызова Ajax, который заменяет изображения галереи - PullRequest
Новая
       14

lightGallery не работает должным образом после вызова Ajax, который заменяет изображения галереи

0 голосов
/ 23 октября 2018

У меня установлена ​​lightGallery, которая прекрасно работает, когда я загружаю свою страницу.

Но когда я выполняю Ajax-вызов для обновления изображений lightGallery, lightSlider не работает.

Моя проблемазаключается в том, что я могу обновлять содержимое после Ajax и просматривать мои изображения в полноэкранном режиме, но эти строки переинициализируются каждый раз, когда я выполняю этот вызов Ajax.

введите описание ссылки здесь

Другими словами, в HTML у меня возникает следующая проблема:

enter image description here

В моем файле 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>

Ответы [ 2 ]

0 голосов
/ 01 ноября 2018

Я решил свою проблему.Теперь я правильно уничтожаю и повторно инициализирую 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();
0 голосов
/ 24 октября 2018

Вам нужно уничтожить и заново запустить 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

...