Search code examples
javascriptjqueryajaxsliderlightgallery

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

I have a lightGallery installed which works great when I load my page.

But when I perform an Ajax call to update the lightGallery images, lightSlider doesn't work.

My problem is that I can update the content after an Ajax and view my images in full screen, but these lines are reinitialized every time I perform this Ajax call.

enter link description here

In other words, in HTML I have the following problem:

enter image description here

In my file main.js I initialize it:

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

In my secondFile.js I call an Ajax call and in its success I update the images of image gallery

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();
            }*/

The content of this lightSlider is located inside the div with name "imageGallery"

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

  • I solved my problem. Now I properly destroy and reinitialize the lightSlider whenever I use it.

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