Zoom on touch

[satb]

Right now, on mobile touch enabled devices, we have to first tap, then pan around for the zoom to take effect. If we simply touch and start dragging, the zoom is not functioning but rather iPad/iPhone ask to copy/paste by selecting the div container.

Any idea how we can get it to work without having to first tap and then pan around? We should be able to touch and zoom immediately (i.e don't need to lift finger off the screen with a first tap on the screen first).

[NightOwl888]

I second this issue. I thought it wasn't working at all on my touch screen until I saw what was posted here, then I tried and it will indeed work after the first tap.

Seems like a bug. Supporting touch screens is important and increasing in importance.

[kevana]

This plugin seems to be dead/dying, but just in case this helps anyone, here's what I added to get around this.

self.zoomContainer.bind('touchmove', function(e){
    self.overWindow = true;
    b.setElements('show');
});

There's still some issues with the zoom window stuttering or not opening on the first try. I believe this is due to Android devices firing multiple events on the first tap before touchstart (mouseenter and mouseclick). It's a bit of a rats nest.

[estebandinamarca]

What plugin do you recommend? I'm looking for a zoom, that works on touch devices. Or maybe working with RoyalSlider Plugin.

[kevana]

I haven't researched options in a while, maybe check out https://github.com/jackmoore/zoom.

[jasonlafferty]

We had the same issue of wanting touch start. If you have an issue with android firing multiple touchstart events just use a debounce, https://davidwalsh.name/function-debounce, and set it to the appropriate interval.

var debouncedTouchStart = debounce(function(e) { self.overWindow = true; b.setElements('show'); }, 250);

self.zoomContainer.bind('touchstart', debouncedTouchStart);

not fully tested but should work/help.

[chinhphan099]

any update ? I wanna zoom when I touchstart and move on tablet.

[tostercx]

The fix above didn't work for me, this did tho:

self.$elem.bind('touchstart', function(e){
  if(self.options.zoomType == "inner") {
    self.showHideWindow("show");

  }
  e.preventDefault();
  var touch = e.originalEvent.touches[0] || e.originalEvent.changedTouches[0];  
  self.setPosition(touch); 
});

It's a copy-paste from zoomContainer's touchmove. You probably don't need all of it.