Jackmoore Zoom 1.7.15: Toggle Zoom Touch-Gerät mit Doppel-Tippen

Question

Mit Zoom von Jackmooren: http://www.jacklmoore.com/zoom/ https://github.com/jackmoore/zoom

Ich mag doppeltes Tippen auf Touch-Geräten verwenden, um den Zoom-Effekt zu wechseln. Der Grund ist das Karussell, das ich benutze (OWL Carousel) für die Bilder hat auch eine Swipe-Funktion und Zoom funktioniert auf einem Touch-Gerät durch Berühren und Ziehen des Bildes, dies widerspricht dem Streichen.

Wie die topman Website tut für mobile: http://www.topman.com/en/tmuk/product/clothing-140502/mens-blazers-5369753/black-textured-slim-fit-tuxedo-jacket-5390835?bi=0&ps=20

Dies ist der Link auf die JS-Datei: https://github.com/jackmoore/zoom/blob/master/jquery.zoom.js

ich das bekommen kann auf einen Doppelklick auf einem nicht Touch-Gerät zu arbeiten:

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

Aber brauchen Sie den Code für die Touch-Einstellungen anzupassen, glaube ich ändern dieser Teil:

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

Vielleicht könnte das Hinzufügen eines Doppeltippen-Listeners mit etwas wie Touchy: https://github.com/yairEO/touchy den Trick machen. Ich habe es geschafft, jetzt einen Doppeltipp zu erkennen, aber nicht die Zoomfunktion zu starten.

Answer 1

Sie können den Doppeltipp-Handler selbst erstellen. Sie werden etwas brauchen, um zu verfolgen, wie schnell der Wasserhahn passiert ist.

Am Ende der Berührung müssen Sie einen Zeitstempel speichern und speichern und verstehen, wie viel Zeit verstrichen ist und ob Sie dies als Doppeltipp betrachten möchten.

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

element.addEventListener("touchend", fnRef); 

Die oben sollte auf Ihre Codierstil und Fall angepasst werden, sondern auf allgemeine, das ist die Logik dahinter.

Der Grund, warum ich 300ms als Vergleichswert verwende, liegt darin, dass Sie das Klickverhalten verhindern und den Zoom zu diesem Zeitpunkt aufrufen müssen. 300ms ist, wenn Tap-Ereignis aufrufen sollte oben auf das Ziel klicken (übliches Verhalten von Browsern in Touch-Umgebung)