Jackmoore Zoom 1.7.15: Toggle zoom sul dispositivo touch con doppio tap

Question

Uso dello zoom per Jackmoore: http://www.jacklmoore.com/zoom/ https://github.com/jackmoore/zoom

vorrei utilizzare doppio tap su dispositivi touch per attivare o disattivare l'effetto zoom. Il motivo è il carosello che sto usando (OWL Carousel) perché le immagini hanno anche una funzione di scorrimento e Zoom funziona su un dispositivo touch toccando e trascinando l'immagine, questo è in conflitto con lo sfioramento.

Come il sito Topman fa per cellulari: http://www.topman.com/en/tmuk/product/clothing-140502/mens-blazers-5369753/black-textured-slim-fit-tuxedo-jacket-5390835?bi=0&ps=20

Questo è il link al file JS: https://github.com/jackmoore/zoom/blob/master/jquery.zoom.js

posso ottenere questo a lavorare su un doppio click su un dispositivo non touch:

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

Ma è necessario adattare il codice per le impostazioni tattili, credo alterare questa parte:

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

Forse aggiungere un ascoltatore a doppio tocco con qualcosa come Touchy: https://github.com/yairEO/touchy potrebbe fare il trucco. Sono riuscito a farlo riconoscere subito un doppio tocco, ma non per avviare la funzione di zoom.

Answer 1

È possibile creare manualmente il gestore del doppio tocco. Avrai bisogno di qualcosa per monitorare quanto è successo il rubinetto.

Sul touch end è necessario e memorizzare un timestamp e capire quanto tempo è trascorso e se si vuole considerare questo come un doppio tocco.

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

element.addEventListener("touchend", fnRef); 

Quanto sopra deve essere adattato al proprio stile e caso di codifica, ma in generale è la logica dietro di esso.

Il motivo per cui sto utilizzando 300 ms come valore di confronto è perché è necessario impedire il comportamento dei clic e richiamare lo zoom in quel momento. 300 ms è quando l'evento tap dovrebbe richiamare il clic sulla sua destinazione (comportamento abituale dei browser utilizzati nell'ambiente touch abilitato)