Question

我确实使用幻灯片放映功能扩展了PhotoSwipe，请参阅this example如果您单击右上角的“播放”按钮并通过单击右上角的暂停按钮停止幻灯片放映，则会启动幻灯片放映。这在PC上运行良好。

它也适用于我的iPad，但点击暂停按钮会产生副作用：图像被放大。我不知道这是因为这个原因。有什么想法吗？

启动/停止功能在功能原型（）中执行。为了摆脱这种副作用，我喜欢在图像上使用单击事件来执行我的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();

我使用了这个实现，效果很好：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等移动设备，在PC上您可以使用空格键启动/停止幻灯片放映。

如果您单击右上角的播放/暂停按钮，我无法解决您在iPad上看到的副作用。

PhotoSwipe：如何将功能绑定到图像点击事件？

2 个答案: