Gallery opens when dragging slide

[pflind]

When you use lightGallery() with the slider the gallery is accidentally opened when you drag a slide. When you drag a slide the release click should be ignored.

A few bugs here and there but great script(s) overall, thank you!

[sachinchoolur]

When you use lightGallery with lightslider i recommend you to turn off mouse drag option enableDrag: false Both are independent plugins and this is just a demonstration for how to integrate third party plugins with lightslider. I will work on lightslider and improve this after releasing lightGallery version 1.2

Thanks.

[pflind]

Thank you for the tip of disabling drag.

[chuprik]

Hi @sachinchoolur

Do you have any solution for solving this issue without turn off the drag option?

Thanks.

[andyf101]

It would be great if this can be properly fixed, but in the mean time the following may resolve the problem of having lightGallery opening while lightSlider is being dragged by a desktop mouse. This works because lightGallery checks for the existing of a class on the body tag before opening (to prevent double-opening), and because the order of lightSlider onBeforeSlide(), the lightGallery opening, and lightSlider onAfterSlide() methods firing in the order needed. Note - I haven't tested this across all browsers/devices, feel free to respond for others if this doesn't work in all cases.

var myLightGallery;
var myLightSlider = $('#photo-gallery').lightSlider({
    // Your options here
    enableDrag: true,
    onSliderLoad: function (el) {
        myLightGallery = el.lightGallery({
            selector: '#photo-gallery .lslide'
        });
    },
    onBeforeSlide: function (el) {
        // When dragging on a desktop lightSlider runs but lightGallery also gets triggered to open
        // Adding the lg-on class to the body tag is a way of temporarily preventing lightGallery from 
        // opening during a lightSlider drag (lightGallery uses this class to prevent double-execution)
        $('body').addClass('lg-on');
    },
    onAfterSlide: function (el) {
        $('body').removeClass('lg-on');
    }
});

[mjaniko]

Same issue, i cant resolve it

[tlygnersjo]

+1

I've got this issue as well. No solution for this?

There should be a setting when initializing lightSlider that lets you setup a lightslider with thumbnails but without lightGallery (I'm using that on the same page but for other content), so that when you slide it doesn't open a empty gallery but still gives the ability to show thumbnails.

[seltix5]

Thanks @andyf101 , it may be temporary solution but it works like a charm and it does not need to change the core code. Great!

[johanvdr]

Great solution @andyf101 ! Works like a charm.

[theparham]

Thank you @andyf101 ! Your workaround is still pretty valid, and it saved me a headache ;)

[xMarcoX]

I confirm that @andyf101 solution works fine in 2021 /clap /clap