PhotoSwipe : 함수를 이미지 탭 이벤트에 바인딩하는 방법?

Question

PhotoSwipe를 슬라이드 쇼 기능으로 확장했습니다. this example 오른쪽 위 모서리의 재생 단추를 클릭하고 오른쪽 위 모서리의 일시 중지 단추를 클릭하여 슬라이드 쇼를 중지하면 슬라이드 쇼가 시작됩니다. 이것은 PC에서 잘 작동합니다.

내 iPad에서도 작동하지만 일시 중지 버튼을 클릭하면 부작용이 있습니다. 이미지가 확대됩니다. 나는이 원인을 전혀 모른다. 어떤 생각?

시작/정지 기능은 playpause() 함수에서 실행됩니다. 이 부작용을 없애기 위해 이미지의 단일 탭 이벤트를 사용하여 playpause() 함수를 실행하는 것을 좋아합니다.

제 질문은 : 어떻게 내 playpause() 함수를 이미지의 클릭/탭 이벤트에 바인딩합니까?

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

당신은 꽤 하드 적절한 도움을 줄 수 있습니다 코드를 보여주는되지 않습니다

이

은 내가 사용하는 코드입니다. 나는이 구현을 adoped event.preventDefault();

사용하고 아주 잘 작동합니다 :

그냥 어둠 속에서 촬영 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하지만 시작하는 이미지의 클릭/슬라이드 쇼를 중지하면 스페이스 바 t을 사용할 수있는 PC에 만 아이 패드와 같은 모바일 장치에서 작동하는 o 슬라이드 쇼를 시작/중지합니다.

오른쪽 상단의 재생/일시 중지 버튼을 클릭하면 iPad에서 나타나는 부작용이 해결되지 않았습니다.