Jackmoore zoom 07.01.15: Włącz zoom na urządzeniu dotykowym z podwójnego dotknięcia

Question

Używanie zoomu Jackmoore: http://www.jacklmoore.com/zoom/ https://github.com/jackmoore/zoom

chciałbym używać podwójnego kurek na urządzeniach dotykowych, aby włączyć efekt powiększenia. Powodem jest używanie karuzeli, której używam (karuzela OWL), ponieważ obrazy mają także funkcję machnięcia, a Zoom działa na urządzeniu dotykowym, dotykając i przeciągając obraz, co jest w konflikcie z przesunięciem.

Podobnie jak w miejscu Topman robi dla telefonu komórkowego: http://www.topman.com/en/tmuk/product/clothing-140502/mens-blazers-5369753/black-textured-slim-fit-tuxedo-jacket-5390835?bi=0&ps=20

to jest link do pliku JS: https://github.com/jackmoore/zoom/blob/master/jquery.zoom.js

mogę uzyskać to do pracy na podwójne kliknięcie na nie urządzenia dotykowego:

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

Ale trzeba dostosować kod dla ustawień dotyku, wierzę, że zmiana tej części:

// 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(); 
         } 
        }); 
      } 

Może dodanie podwójnego podsłuchiwacza z czymś takim jak Touchy: https://github.com/yairEO/touchy może załatwić sprawę. Udało mi się go teraz rozpoznać po podwójnym kliknięciu, ale nie po to, by uruchomić funkcję powiększania.

Answer 1

Możesz sam stworzyć podwójny uchwyt stuknięcia. Będziesz potrzebował czegoś, by śledzić, jak szybko stało się dotknięcie.

Po dotknięciu należy zapisać znacznik czasu i sprawdzić, ile czasu minęło i czy należy rozważyć to jako podwójne dotknięcie.

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

element.addEventListener("touchend", fnRef); 

Powyższe powinno być dostosowane do stylu i przypadku kodowania, ale ogólnie jest to logika, która za tym stoi.

Powodem, dla którego używam 300ms jako wartości porównawczej, jest to, że należy zapobiegać kliknięciom i wywoływać powiększenie w tym czasie. 300ms to czas, w którym powinno się wywoływać zdarzenie typu "kliknij" u góry strony (zwykle zachowanie przeglądarek używanych w środowisku z obsługą dotyku).