PhotoSwipe: как связать функцию с событием крана изображения?

Question

Я расширил PhotoSwipe с помощью функции слайд-шоу, см. this example. Слайд-шоу начинается, если вы нажмете кнопку «Воспроизвести» в верхнем правом углу и остановите слайд-шоу, нажав кнопку паузы в правом верхнем углу. Это отлично работает на ПК.

Он работает также на моем iPad, но нажатие кнопки «Пауза» имеет побочный эффект: изображение увеличено. Понятия не имею, таким образом, это вызывает. Есть идеи?

Функция Start/Stop выполняется в функции playpause(). Чтобы избавиться от этого побочного эффекта, мне нравится использовать однократное событие на изображении для выполнения моей функции playpause().

Так что мой вопрос: как связать функцию playpause() с событием click/tap на изображении?

Это код, я использую:

/** 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

Вы не показывая какой-либо код, что делает его довольно трудно дать надлежащую помощь.

Просто съемки в темноте: использовать event.preventDefault();

Я adoped эту реализацию, и она работает достаточно хорошо: https://photoswipe.uservoice.com/forums/275302-feature-requests-ideas/suggestions/6964114-autoplay

Answer 2

Я связать функцию моего PlayPause() в случае нажмите/водопроводную на изображении следующий код:

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; 
     } 

чтобы увидеть его работы по адресу: http://andrewolff.jalbum.net/Reestdal_PS/#&gid=1&pid=6, но нажав на изображение, чтобы начать/остановить слайд-шоу работает только на мобильном устройстве, как на IPad, на ПК, вы можете использовать пространство бар т o запустить/остановить слайд-шоу.

Я не решил побочный эффект, который вы видите на iPad, если вы нажмете кнопку воспроизведения/паузы в верхнем правом углу.