Jackmoore Zoom 1.7.15: switch zoom on the touch device with a double tap

Question

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

I would like to use double contact on touch devices to switch the zoom effect. The reason is that the carousel that I use (OWL Carousel) also has a scroll function for images, and Zoom works on the touch device by touching and dragging the image, this conflicts with the napkin.

Like the topman site for mobile devices: 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 with a double click on a non-touching device:

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

But you need to adapt the code for touch settings, I believe that I changed 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(); } }); } 

Perhaps adding a dual channel listener with something like Touchy: https://github.com/yairEO/touchy might do the trick. I managed to make it recognize a double click now, but not trigger the zoom function.

Answer 1

You can create a double tap handler yourself. You will need something to track how quickly the click occurred.

At the touch end, you need to both save the time stamp and understand how much time has passed, and if you want to consider it 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 tailored to your coding style and case, but overall it's logic.

The reason I use 300 ms as the comparison value is because at this time you need to prevent click behavior and cause it to scale. 300 ms is when a transition event should trigger a click on top of its target (normal behavior of browsers used in a touch-enabled environment)