Magnific-popup: Feature request: Support touch gestures

[iBobik]

Could you please add iOS-like gestures to:

• swipe left and right with finger tracking
• close popup by pinch
• zoom and move on zoomed image by pinch

I know it could be hard to imagine, so I demonstrated it in this short video: https://www.dropbox.com/s/2gzfgj3ad92hvo3/video%2020-03-15%2018%2031%2041.mov?dl=0

[vdswouter]

+1

[sydneyitguy]

+1

[dimsemenov]

See https://github.com/dimsemenov/Magnific-Popup/issues/378#issuecomment-51936196

[washamdev]

It is fairly easy to implement next/previous actions via swipe gestures using jQuery Mobile:

$.event.special.swipe.scrollSupressionThreshold = "20px";
$("body").on("swiperight", ".mfp-img", function () {
    $(".gallery").magnificPopup("prev");
});
$("body").on("swipeleft", ".mfp-img", function () {
    $(".gallery").magnificPopup("next");
});

I increased the scrollSupressionThreshold since it seemed like the swipe was only registering half the time. I haven't been able to figure out a way to make the images slide left/right when going next/prev, but at least touch gestures are now enabled.

[carasmo]

With the latest version of:

https://github.com/mattbryson/TouchSwipe-Jquery-Plugin

Swipe and zoom and pinch works as if native (there was a chunky delay with earlier version).

$("body").swipe({
        swipeLeft: function(event, direction, distance, duration, fingerCount) {
            $(".mfp-arrow-left").magnificPopup("prev");
        },
        swipeRight: function() {
            $(".mfp-arrow-right").magnificPopup("next");
        },
        threshold: 50
    });

https://github.com/dimsemenov/Magnific-Popup/issues/378
https://github.com/dimsemenov/Magnific-Popup/issues/378#issuecomment-51936196

[iBobik]

@johndubya @carasmo This is something different. It jus istens swipe gesture and then switch image. But I need to follow users finger, move image according to this move and switch image on the end of gesture. See video from first comment.

[carasmo]

@iBobik -- I can't help you there. I just wanted a gallery with swipe left and right with native zoom and pinch and this is what the post above is about.

[yuvilio]

Nice makeshift swiper, @carasmo. Inspired me to do something similar using hammerjs.

var mc = new Hammer(document.body);
mc.on('swipeleft', function(){
    $(".mfp-arrow-left").magnificPopup("prev");
});

mc.on('swiperight', function(){
    $(".mfp-arrow-right").magnificPopup("next");
});

[iBobik]

Btw, this project is perfectly useable on both touch and desktop devices: http://photoswipe.com/

Jan Pobořil
http://honza.poboril.cz/

1. 
   
   1. 2016 v 0:44, yuvilio [email protected]:
   
   

Nice makeshift, swiper @carasmo. Inspired me to do something similar using hammerjs.

var mc = new Hammer(document.body);
mc.on('swipeleft', function(){
$(".mfp-arrow-left").magnificPopup("prev");
});

mc.on('swiperight', function(){
$(".mfp-arrow-right").magnificPopup("next");
});
—
Reply to this email directly or view it on GitHub.

[alxndr-w]

@carasmo any idea, why "next" and "prev" are inverted for me? If i swype left, it will show the next image and vice versa.

[librien]

@alexplusde for some reason that's the way it was coded above. A swipe in the 'right' direction should trigger 'prev', and vice versa 'left' / 'next'.

[riotbr]

As @yuvilio , I'm using Hammer. It works perfectly on Android but, for some reason, there's a problem with the swipe on iOS.

Just 'for science', how can I disable the clickable area of the arrows (and the arrows) to use only the Swipe when in Mobile?

Btw, sorry about my english ;)

Thanks in advance!

[tobiv]

@riotbr you could just hide the arrow buttons with CSS media queries, or use something like Modernizr to add a class on touch-enabled devices that you can then hide with CSS...

[ZachBerman]

@carasmo - calling 'body' seemingly interferes with input boxes on my page. Tried replacing with 'mfp-container', but doesn't work. Any ideas to avoid this?