CODEWITHSUNDEEP
javascripteventstapphotoswipe
André Wolff
André Wolff

Reputation: 41

PhotoSwipe: how to bind a function to the image tap event?

I did extend PhotoSwipe with a Slide Show function, see this example The Slide Show starts if you click the Play button in the upper right corner and you stop the Slide Show by clicking the pause button in the upper right corner. This works fine on a PC.

It works also on my iPad, but clicking the Pause button has a side effect: the image is zoomed-in. I have no idea thus this causes. Any idea?

The Start/Stop function is executed in a function playpause(). To get rid of this side effect I like to use the single tap event on the image to execute my playpause() function.

So my question is: how do I bind my playpause() function to the click / tap event on the image?

This is the code I use:

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

Upvotes: 0

Views: 1464

Answers (2)

Andr&#233; Wolff
Andr&#233; Wolff

Reputation: 41

I did bind my playpause() function to the click / tap event on the image with next 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; 
        }

To see it working go to: http://andrewolff.jalbum.net/Reestdal_PS/#&gid=1&pid=6 but clicking in the image to start/stop the slide show works only on a mobile device like the iPad, on a PC you can use the space bar to start/stop the slide show.

I did not solve the side-effect you see on an iPad if you click on the play/pause button in the upper right corner.

Upvotes: 0

T. Kuther
T. Kuther

Reputation: 620

You aren't showing any code, which makes it quite hard to give proper help.

Just shooting in the dark: use event.preventDefault();

I adoped this implementation, and it works quite well: https://photoswipe.uservoice.com/forums/275302-feature-requests-ideas/suggestions/6964114-autoplay

Upvotes: 0

Related Questions