Prevent Swiping/Dragging of slides in PhotoSwipe

Question

I can not seem to get Photoswipe to prevent a drag/swipe from changing slides (so only the arrows go to the previous/next slides)

The issue is that I've got a HTML slide with touch events inside it, but photoswipe's touch events are superseding them and while dragging around in the content of the slide, the entire slide moves too...

I thought this event was supposed to prevent it?

pswp.listen('preventDragEvent', function(e, isDown, preventObj) {
    preventObj.prevent = true;
});

I also tried the 'isClickableElement' option, but that doesn't seem to help, either...

Did you manage to create a solution for your problem? I've come across the same issue. — dajoto, Apr 26 '18 at 10:02
@dajoto I made a slight modification to the code, it's here: https://github.com/Chenzo/PhotoSwipe/tree/feature/prevent-swipe I had put that in a comment I flagged as the answer, but it was deleted since it's not really an answer. I dont remember exactly what I did to make it work. — Chenzo, Apr 27 '18 at 18:33

score 2 · Answer 1 · answered Feb 07 '19 at 02:37

This method isn't ideal, but if you're looking to disable swiping/dragging without having to use a modified version of PhotoSwipe, this worked for me:

var allowSwipe = false;
function preventSwipe (e) {
    if (!allowSwipe) {
        e.preventDefault();
        e.stopPropagation();
    }
}

pswp.container.addEventListener('pointerdown', preventSwipe);
pswp.container.addEventListener('MSPointerDown', preventSwipe);
pswp.container.addEventListener('touchstart', preventSwipe);
pswp.container.addEventListener('mousedown', preventSwipe);

Or if you're using jQuery:

var allowSwipe = false;
$(pswp.container).on('pointerdown MSPointerDown touchstart mousedown', function () {
    return allowSwipe;
});

Using the allowSwipe variable, you can re-enable swiping at any point by setting it to true.

Prevent Swiping/Dragging of slides in PhotoSwipe

1 Answers1