Magnific-popup: Disable popup from a drag event

[samholmes]

I have images in a carousel plugin (slick), and the plugin supports drag events to scroll through the images. However, click events still are triggered on drag events.

Is there a way to prevent popups from opening on a link when a click event occurs after a drag event?

[falconwhite]

I ran into the same problem, but found a solution using slicks events and setting a flag. Maybe this can help you:

// Flag to disable opening while dragging - "true" means MFP is allowed to open up.
var mfpOpen = true;  

// Return the flag inside the disableOn option
$('.galery-img-link').magnificPopup({
  type: 'image',
  disableOn: function() {
    return mfpOpen;
  }
});  

// Set the flag using slick’s events  
$('.slick-slider').on('beforeChange', function(){
  mfpOpen = false;    
});  

$('.slick-slider').on('afterChange', function(){    
  mfpOpen = true;        
});    

[samholmes]

Thank you! this really helps!

[owlyowl]

how did you guys deal with slick cloning the elements in the carousel as magnific popup is evaluating all the anchors from the clones as well as the non clones so I get image double ups in the gallery

[samholmes]

@owlyowl I haven't noticed any double elements like you're spoke off. Maybe this is a separate issue.

[MelchnerRoman]

@owlyowl the easiest way would be to add infinite: false to your slider
$('.slick-slider').slick({ infinite: false, ..other options });