title: Photoswipe gallery close event on iOS
body: <p>I've implemented the fabulous <a href="http://www.photoswipe.com/" rel="nofollow">photoswipe</a> library in one of my recent mobile applications using jQueryMobile and I've run into a small problem using it in tandem with iOS 5 (could be others, but I've only got a iOS 5 device).</p>
  
  <p>Below is a the implemented javascript</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
      (function (window, $, PhotoSwipe) {
  
          $(document).ready(function () {
  
              $('div.gallery-page')
                      .live('pageshow', function (e) {
  
                          var 
                              currentPage = $(e.target),
                              options = {},
                              photoSwipeInstance = $("ul.gallery a", e.target).photoSwipe(options, currentPage.attr('id'));
  
                          photoSwipeInstance.show(0);
  
                          return true;
  
                      })
  
                      .live('pagehide', function (e) {
  
                          var 
                              currentPage = $(e.target),
                              photoSwipeInstance = PhotoSwipe.getInstance(currentPage.attr('id'));
  
                          if (typeof photoSwipeInstance != "undefined" &amp;&amp; photoSwipeInstance != null) {
                              PhotoSwipe.detatch(photoSwipeInstance);
                          }
                          console.log($(e.target));
                          history.back();
  
                          return true;
  
                      });
  
          });
  
      } (window, window.jQuery, window.Code.PhotoSwipe));
  
  &lt;/script&gt;
  </code></pre>
  
  <p>The example above is pretty much exactly as the implementation guide says with one difference: when the pageshow event is raised and the instance has been attached, I'm calling "photoSwipeInstance.show(0);" so as to display the gallery immediately.</p>
  
  <p>This all works fine except that when I close the gallery from the toolbar, it goes back to the static page rather than the page it was called from.</p>
  
  <p>My first thought was to implement a method against the event "onHide" and perform a "history.back();" statement:</p>
  
  <pre><code>photoSwipeInstance.addEventHandler(PhotoSwipe.EventTypes.onHide, function (e) {
      history.back();
  });
  </code></pre>
  
  <p>This worked like a charm on Android, but nothing happened on iOS, so I thought about a double history back for iOS devices:</p>
  
  <pre><code>photoSwipeInstance.addEventHandler(PhotoSwipe.EventTypes.onHide, function (e) {
      console.log(navigator.appVersion);
      if ((/iphone|ipod|ipad.*os 5/gi).test(navigator.appVersion)) {
          history.go(-2);
      } else {
          history.back();
      }
  
  });
  </code></pre>
  
  <p>But still no luck, iOS just sits there and laughs at me. Does anyone know the best way to redirect back to the page that attached the photoswipe instance rather than going back to the actual html page? Here is an example of the final JS markup:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  
  (function (window, $, PhotoSwipe) {
  
      $(document).ready(function () {
  
          $('div.gallery-page')
                  .live('pageshow', function (e) {
  
                      var 
                          currentPage = $(e.target),
                          options = {},
                          photoSwipeInstance = $("ul.gallery a", e.target).photoSwipe(options, currentPage.attr('id'));
  
                      // onHide event wire back to previous page.
                      photoSwipeInstance.addEventHandler(PhotoSwipe.EventTypes.onHide, function (e) {
                          console.log(navigator.appVersion);
                          if ((/iphone|ipod|ipad.*os 5/gi).test(navigator.appVersion)) {
                              history.go(-2);
                          } else {
                              history.back();
                          }
  
                      });
  
                      photoSwipeInstance.show(0);
  
                      return true;
  
                  })
  
                  .live('pagehide', function (e) {
  
                      var 
                          currentPage = $(e.target),
                          photoSwipeInstance = PhotoSwipe.getInstance(currentPage.attr('id'));
  
                      if (typeof photoSwipeInstance != "undefined" &amp;&amp; photoSwipeInstance != null) {
                          PhotoSwipe.detatch(photoSwipeInstance);
                      }
  
                      return true;
  
                  });
  
      });
  
  } (window, window.jQuery, window.Code.PhotoSwipe));
  
  &lt;/script&gt;
  </code></pre>