lightSlider drag opens magnificPopup stopped

We’re using lightSlider for just that, a photo slider.

We’re using magnificPopup in conjunction with lightSlider to open an image Popup Gallery.

The trouble is, dragging lightSlider (which is nice), fires the magnificPopup ondragend (not desired).

Solution: Checked for a body class before firing the magnificPopup. If it’s still there, don’t even attach it. The class is added by the lightslider library change below, onmouseout, and removed again with a slight delay onmouseup.

Fix:

<a onclick="
if( jQuery('body').hasClass('dragging') ){								console.log('dragging now');
}else{
jQuery.magnificPopup.open({									items: MyArrayOfImagesToFeedToMagnific,									type: 'image',									gallery: {								      enabled: true								    },														callbacks: {										beforeOpen: function() {
// unused					   										 },									open: function() {										
// unused								},
}, ` + i + `); // i (index of the MyArrayOfImagesToFeedToMagnific Array) is the item the visitor clicked on
}">

lightslider.js

...
$(window).on('mousemove', function (e) {
if (isDraging) {

// Added
$('body').addClass('dragging');

endCoords = (settings.vertical === true) ? e.pageY : e.pageX;
$this.touchMove(endCoords, startCoords);
}
});
$(window).on('mouseup', function (e) {
if (isDraging) {
$slide.find('.lightSlider').removeClass('lsGrabbing').addClass('lsGrab');

// Added
setTimeout(function(){
$('body').removeClass('dragging');
}, 500);

isDraging = false;
...

Leave a Reply

You must be logged in to post a comment.