Lightgallery: Lightslider used with lightgallery > dragging an image opens unwanted lightgallery

Created on 18 Aug 2017 · 3Comments · Source: sachinchoolur/lightGallery

I'm using the combination of lightslider and lightgallery. Everything is working like i want to, except when i mouse drag the gallery opens. I feel this should not happen, it should only slide the images with mousedrag.

I cannot seem to fix this. This is the relevant code:

var allowOtherImageTools = true;

jQuery(function ($)
{
    if ($(".image_tools > li").length > 1)
    {
        var myLightSlider;

        myLightSlider = $(".image_tools").lightSlider({
            item: 1,
            slideMargin: 5, //margin right

            enableDrag: true, //mouse drag
            loop: true, //loop carousel

            pager: false, //small bullets
            gallery: false, //small thumbnails

            enableTouch: true,
            swipeThreshold: 50,
            prevHtml: '<span class="icon icon-left-open">',
            nextHtml: '<span class="icon icon-right-open">',
            onBeforeSlide: function (imageTools)
            {
                allowOtherImageTools = false;
            },
            onAfterSlide: function (imageTools)
            {
                allowOtherImageTools = true;

                .......
            },
            /*
             * Gallery > When slider is loaded the gallery is iniated
             */
            onSliderLoad: function (imageTools)
            {
                var myLightGallery;

                myLightGallery = imageTools.lightGallery(
                        {
                            selector: '.lslide figure img', // custom selector to find content

                            mode: 'lg-slide', // fade mode (slide and fade present, other need additional css file)
                            download: false, // show or hide download button
                            prevHtml: '<span class="icon icon-left-open">',
                            nextHtml: '<span class="icon icon-right-open">',
                            loop: true,
                            //zoom plugin
                            zoom: true,
                            actualSize: true, // back to default size
                            scale: 0.5, // zoom scale
                            hideBarsDelay: 150000, //hide toolbar 15s
                        })

                        // event        object      Jquery event object
                        // prevIndex    int         index of previous slide
                        // index        int         index of the slide
                        // fromTouch    bool        true if slide function called via touch event or mouse drag
                        // fromThumb    bool        true if slide function called via thumbnail click
                        .on('onAfterSlide.lg', function (event, prevIndex, index, fromTouch, fromThumb)
                        {
                            //match slider index
                            myLightSlider.goToSlide(index);
                        })

                        // event        object      Jquery event object
                        .on('onBeforeOpen.lg', function (event) {
                            if (!allowOtherImageTools)
                            {
                                //what should i do here??

                            }
                        });


            }
        });
    }
    //else no image slider needed
});

As a fix, i'm trying (and failing) to not open the gallery at a mousedrag. I'm using the onBeforeSlide / onAfterslide events to set a global allowOtherImageTools in an attempt to stop the opening off the gallery.

My questions

Is the mousedrag + auto open the gallery a feature or bug?
If not a bug: What should i do in the anonymous function bound to the event onBeforeOpen.lg to prevent the opening of the gallery?

Source

preliot

Most helpful comment

Temporary fix:

onBeforeSlide: function (imageTools)
            {
                $('body').addClass('lg-on');
            },
            /*
             * Slider > Replacement text with real sentences
             */
            onAfterSlide: function (imageTools)
            {
                $('body').removeClass('lg-on');
}
}

Works, because gallery assumes it is already opened. This is a hack, but keeps my mousedrag!

preliot on 22 Aug 2017

👍4 ❤2 🎉1

All 3 comments

Hey @preliot,
At present, there are no direct ways to solve the issue. I'm working on lightSlider version 2.0. I'll try to include the fix in v 2.0.

for current use, you can disable enableDrag and enableTouch from the settings.
http://sachinchoolur.github.io/lightslider/settings.html

sachinchoolur on 22 Aug 2017

Temporary fix:

onBeforeSlide: function (imageTools)
            {
                $('body').addClass('lg-on');
            },
            /*
             * Slider > Replacement text with real sentences
             */
            onAfterSlide: function (imageTools)
            {
                $('body').removeClass('lg-on');
}
}

Works, because gallery assumes it is already opened. This is a hack, but keeps my mousedrag!

preliot on 22 Aug 2017

👍4 ❤2 🎉1

While probably using lightslider is probably a better idea, but as it is too late for me to switch, here is what works for me for tiny-slider

slider.events.on('dragStart', function () {
        setTimeout(function () {
          $('body').addClass('lg-on');
        }, 100);
      });

      slider.events.on('dragEnd', function () {
        $('body').removeClass('lg-on');
      });