PhotoSwipe: Wie bindet man eine Funktion an das Image Tap Event?

Question

Ich habe PhotoSwipe mit einer Diashow-Funktion erweitert, siehe this example Die Diashow wird gestartet, wenn Sie auf die Schaltfläche Wiedergabe in der oberen rechten Ecke klicken und die Diashow durch Klicken auf die Pause-Schaltfläche in der oberen rechten Ecke stoppen. Dies funktioniert auf einem PC einwandfrei.

Es funktioniert auch auf meinem iPad, aber das Klicken auf die Schaltfläche Pause hat einen Nebeneffekt: Das Bild wird gezoomt. Ich habe keine Ahnung also das verursacht. Irgendeine Idee?

Die Start/Stop-Funktion wird in einer Funktion playpause() ausgeführt. Um diesen Nebeneffekt loszuwerden, benutze ich gerne das single-tap-Ereignis auf dem Bild, um meine playpause() -Funktion auszuführen.

Meine Frage ist also: Wie binde ich meine playpause() -Funktion an das Click/TAP-Ereignis auf dem Bild?

Dies ist der Code, den ich verwenden:

/** HTML **/ 
<div class="pswp__top-bar"> 
    <div class="pswp__counter"></div> 
    <!-- Play/Pause button --> 
    <a href="javascript:playpause()" id="link--play"><img src="res/play.png" width="30" height="30" id="$playpause" alt="Speel/Stop (spatie balk)" title="Speel/Stop (spatie balk)"></a> 
    <button class="pswp__button pswp__button--close" title="Close (Esc)"></button> 

/** JS **/ 
function slideShowTimer() { 
    if ((stopAfterLastSlide)&&((slide_index == items.length-1))) { 
     document.images['$playpause'].src = play_img.src; 
     clearTimeout(slideShowTimerID); 
     playing= !playing; 
     pswp.close(); 
    } 
    else { 
     slideShowTimerID = setTimeout("slideShowTimer()",viewtime); 
     pswp.next(); 
    } 
}; 

function playpause() {      
     playing= !playing; 
     if (!playing) { 
     document.images['$playpause'].src = play_img.src; 
     clearTimeout(slideShowTimerID); 
     } else { 
     document.images['$playpause'].src = pause_img.src; 
     slideShowTimer(); 
    } 
}; 

    pswp = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options); 
    pswp.listen('destroy', function() { 
    if (playing) { 
      playing = false; 
      document.images['$playpause'].src = play_img.src; 
      clearTimeout(slideShowTimerID);  
     }  
    }); 
    pswp.init(); 

/** CSS **/ 
#link--play { 
    position: absolute; 
    right: 132px; 
    padding: 6px; 
    z-index: 9999; 
} 

Answer 1

Sie keinen Code zeigen, was es sehr schwierig macht richtige Hilfe macht.

Schießen Gerade im Dunkeln: verwenden event.preventDefault();

ich diese Implementierung adoped, und es funktioniert ganz gut: https://photoswipe.uservoice.com/forums/275302-feature-requests-ideas/suggestions/6964114-autoplay

Answer 2

ich meine playpause() Funktion auf die Klick-/Tap-Ereignis auf das Bild, banden mit nächste Code:

ui.onGlobalTap = function(e) { 
     e = e || window.event; 
     var target = e.target || e.srcElement; 
     if ((framework.hasClass(target, 'pswp__img')) && !PC) { 
       if(!_controlsVisible) { 
        ui.showControls(); 
        setTimeout(function() { 
         ui.hideControls(); 
        }, 2000); 
       } 
       playpause(); 
       return; 
     } 

um zu sehen, es arbeiten gehen zu: http://andrewolff.jalbum.net/Reestdal_PS/#&gid=1&pid=6 aber in dem Bild klicken zum starten/stoppen der Diashow funktioniert nur auf einem mobilen Gerät wie dem iPad, auf einem PC Sie die Leertaste t verwenden können o Starten/Stoppen der Diashow.

Ich habe den Nebeneffekt, den Sie auf einem iPad sehen, nicht gelöst, wenn Sie auf die Wiedergabe/Pause-Schaltfläche in der oberen rechten Ecke klicken.