Mouse drag trigger click event

[guoyunhe]

Here is an example combine Flickity and LightGallery:

http://codepen.io/guoyunhebrave/pen/yJbwBz

When using mouse to drag sliders, it will trigger click event on pictures and open light box.

Is here any way to avoid this happen?

[desandro]

The solution is to use Flickity's staticClick event, but it appears LightGallery does not provide an option to disable its click events.

[guoyunhe]

I found a trick to solve this problem:

<div class="gallery">
  <div class="item">
    <img src="...">
    <div class="layer"></div>
  </div>
</div>

.item {
  width: 300px;
  height: 300px;
}

img {
   width: 100%;
   height: 100%;
}

.layer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
}

var $gallery = $('.gallery');

var slider = new Flickity($gallery[0]);

$gallery.lightGallery({
    selector: 'img',
    download: false,
});

var avoidClickTimer = new Date().getTime();
slider.on('dragEnd', function () {
    avoidClickTimer = new Date().getTime();
});

$gallery.find('.layer').click(function () {
    var date = new Date();
    if (date.getTime() - avoidClickTimer > 100) {
        $(this).siblings('img').click();
    }
});

Let lightGallery listen to img, not div.item. And div.layer will prevent all clicks on slider items. When drag end, set 100ms timer to prevent click events on the item. After that, normal click will be passed to img element

[AlexandraKlein]

Solved this with the following:

$el.on('dragStart.flickity', () => $el.find('.slide').css('pointer-events', 'none'));
$el.on('dragEnd.flickity', () => $el.find('.slide').css('pointer-events', 'all'));

[woutervanerp]

This worked! Thank you :)

[SakibAlIslam]

Hey, I solved it for Vanila Javascript. You may check it.

const elem = document.querySelector('.collectionsSlider'); const flkty = new Flickity(elem, { contain: true, freeScroll: true, prevNextButtons: false, pageDots: false });

flkty.on('dragStart', () => flkty.slider.childNodes.forEach((slide) => { slide.style.pointerEvents = 'none'; })); flkty.on('dragEnd', () => flkty.slider.childNodes.forEach((slide) => { slide.style.pointerEvents = 'all'; }));

ENJOY