Jackmoore Zoom 1.7.15: Toggle zoom on touch device with double tap

Using Zoom by Jackmoore: http://www.jacklmoore.com/zoom/ https://github.com/jackmoore/zoom

I would like to use double tap on touch devices to toggle the zoom effect. The reason is the carousel I'm using (OWL Carousel) for the images also has a swipe function and Zoom works on a touch device by touching and dragging the image, this conflicts with the swipe.

Like the topman site does for mobile: http://www.topman.com/en/tmuk/product/clothing-140502/mens-blazers-5369753/black-textured-slim-fit-tuxedo-jacket-5390835?bi=0&ps=20

This is the link to the JS file: https://github.com/jackmoore/zoom/blob/master/jquery.zoom.js

I can get this to work on double click on a non touch device:

if (settings.on === 'toggle') {
                $source.on('dblclick.zoom',
                    function (e) {
                        if (clicked) {
                            stop();
                        } else {
                            start(e);
                        }
                        clicked = !clicked;
                    }
                );

But need to adapt the code for the touch settings, I believe altering this part:

// Touch fallback
            if (settings.touch) {
                $source
                    .on('touchstart.zoom', function (e) {
                        e.preventDefault();
                        if (touched) {
                            touched = false;
                            stop();
                        } else {
                            touched = true;
                            start( e.originalEvent.touches[0] || e.originalEvent.changedTouches[0] );
                        }
                    })
                    .on('touchmove.zoom', function (e) {
                        e.preventDefault();
                        zoom.move( e.originalEvent.touches[0] || e.originalEvent.changedTouches[0] );
                    })
                    .on('touchend.zoom', function (e) {
                        e.preventDefault();
                        if (touched) {
                            touched = false;
                            stop();
                        }
                    });
            }

Maybe adding a double tap listener with something like Touchy: https://github.com/yairEO/touchy could do the trick. I've managed to get it to recognised a double tap now, but not to start the zoom function.

Answers:

Answer

You can create double tap handler yourself. You will need something to track how fast the tap happened.

On touch end you need to and store a timestamp and understand how much time went by and if you want to consider this as a double tap.

var stateVar = new Date().getTime();
function fnRef(e){
    if(new Date().getTime() - stateVar < 300){
        e.preventDefault();
        // invoke logic here
    }
}

element.addEventListener("touchend", fnRef);

The above should be adapted to your coding style and case, but on general that is the logic behind it.

The reason why I am using 300ms as a comparison value is because you need to prevent the click behavior and invoke your zoom at that time. 300ms is when tap event should invoke click on top of it's target (usual behavior of browsers used in touch enabled environment)

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.