title: PhotoSwipe: how to bind a function to the image tap event?
body: <p>I did extend PhotoSwipe with a Slide Show function, see <a href="http://andrewolff.jalbum.net/Reestdal_PS/#&amp;gid=1&amp;pid=13" rel="nofollow">this example</a> 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.</p>
  
  <p>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?</p>
  
  <p>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.</p>
  
  <p>So my question is: how do I bind my playpause() function to the click / tap event on the image?</p>
  
  <p>This is the code I use:</p>
  
  <pre><code>/** HTML **/
  &lt;div class="pswp__top-bar"&gt;
      &lt;div class="pswp__counter"&gt;&lt;/div&gt;
      &lt;!-- Play/Pause button --&gt;
      &lt;a href="javascript:playpause()" id="link--play"&gt;&lt;img src="res/play.png"  width="30" height="30" id="$playpause" alt="Speel/Stop (spatie balk)" title="Speel/Stop (spatie balk)"&gt;&lt;/a&gt;
      &lt;button class="pswp__button pswp__button--close" title="Close (Esc)"&gt;&lt;/button&gt;
  
  /** JS **/ 
  function slideShowTimer() {
      if ((stopAfterLastSlide)&amp;&amp;((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;
  }
  </code></pre>