Jackmoore ज़ूम 1.7.15: डबल टैप

Question

ज़ूम का उपयोग के साथ संपर्क डिवाइस पर टॉगल ज़ूम Jackmoore द्वारा: http://www.jacklmoore.com/zoom/ https://github.com/jackmoore/zoom

मैं टच डिवाइस पर डबल टैप उपयोग करने के लिए ज़ूम प्रभाव टॉगल करने के लिए करना चाहते हैं। कारण यह है कि छवियों के लिए मैं जिस कैरोसेल का उपयोग कर रहा हूं (ओडब्लूएल कैरोसेल) भी एक स्वाइप फ़ंक्शन है और ज़ूम छवि को छूने और खींचकर टच डिवाइस पर काम करता है, यह संघर्ष स्वाइप के साथ होता है। http://www.topman.com/en/tmuk/product/clothing-140502/mens-blazers-5369753/black-textured-slim-fit-tuxedo-jacket-5390835?bi=0&ps=20

यह जे एस फ़ाइल के लिए लिंक है:

Topman साइट की तरह मोबाइल के लिए करता है https://github.com/jackmoore/zoom/blob/master/jquery.zoom.js

मैं इस प्राप्त कर सकते हैं एक गैर स्पर्श डिवाइस पर डबल क्लिक करें पर काम करने की:

इस हिस्से

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

लेकिन स्पर्श सेटिंग्स के लिए कोड अनुकूलित करने की आवश्यकता है, मैं फेरबदल विश्वास:

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

शायद टची: https://github.com/yairEO/touchy जैसे कुछ के साथ एक डबल टैप श्रोता जोड़ना चाल कर सकता है। मैंने इसे एक डबल टैप को पहचानने में कामयाब रहा है, लेकिन ज़ूम फ़ंक्शन शुरू नहीं किया है।

Answer 1

आप अपने आप को डबल टैप हैंडलर बना सकते हैं। आपको ट्रैक करने के लिए कुछ चाहिए कि टैप कितनी तेजी से हुआ।

स्पर्श अंत पर आपको टाइमस्टैम्प स्टोर करने और स्टोर करने की आवश्यकता है और समझें कि कितना समय बीत गया है और यदि आप इसे डबल टैप के रूप में देखना चाहते हैं।

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

element.addEventListener("touchend", fnRef); 

ऊपर अपने कोडिंग शैली और मामले के लिए अनुकूलित किया जाना चाहिए, लेकिन सामान्य पर इसके पीछे तर्क यह है कि।

कारण मैं तुलनात्मक मूल्य के रूप में 300ms का उपयोग कर रहा हूं क्योंकि आपको क्लिक व्यवहार को रोकने और उस समय अपने ज़ूम का आह्वान करने की आवश्यकता है। 300ms तब होता है जब टैप ईवेंट को अपने लक्ष्य के शीर्ष पर क्लिक करना चाहिए (स्पर्श सक्षम वातावरण में उपयोग किए जाने वाले ब्राउज़रों का सामान्य व्यवहार)