Photoswipe + JQM: back event issue

问题

$(document).on("pagecreate", function() {
            $.jsonp({
                url: 'URL_TO_GET_JSONP',
                callbackParameter: 'get_photo',
                success: function(json, status) {
                    var photo = [];
                    var path = 'URL_TO_GET_JSONP';
                    $.each(json, function(a,b){
                        photo.push('

'); photo.push(''); photo.push('

'); }); $('.gallery').html(photo.join('')); var myPhotoSwipe = $(".gallery a").photoSwipe({ enableMouseWheel: false, }) }, error: function(){ alert("Unable to load photos."); } }); });

I am having issues with the gallery and the browser back buttons. Users are more likely to press their back button to get out of the gallery as opposed to the little (x) button. The problem is when you use the back button you end up at a blank page with no nav or content just the page background. (e.g: http://www.photoswipe.com/latest/examples/04-jquery-mobile.html)

Is there any work around for it???

回答1:

I am still looking for an answer myself, but maybe this helps you.

jQuery Mobile uses the hash to keep pages in history and navigate back. When going into the carousel mode with Photoswipe event handlers are attached to back event (the close (x) button is nothing more than going back in history to the gallery index page). Using the close (x) button detaches the event handlers and gives control back to jQuery Mobile. Using the device's back button to get out of the carousel does not work because somehow the hash list is messed up for jQuery Mobile.

If I find a fix I will post it here.

(Edited to add a solution.)

I have found a solution that works for me.

There are two things you need to do: 1) remove the ps-active class from the body tag 2) find all photoswipe instances and unset them

The following code worked for me:

$(document).bind('pagebeforechange', function(e) {
if ($('.ps-carousel').length) {
    $('body').removeClass('ps-active');
    $('div.gallery-page').each(function(){
        var photoSwipe = window.Code.PhotoSwipe;
        var photoSwipeInstance = photoSwipe.getInstance($(this).attr('id'));
        if (typeof photoSwipeInstance != "undefined" && photoSwipeInstance != null) {
            photoSwipe.unsetActivateInstance(photoSwipeInstance);
        }
    });
}
});

Note that you need to change the 'div.gallery-page' if you are not using the same class as used in the photoswipe examples (such as http://www.photoswipe.com/latest/examples/04-jquery-mobile.html)

回答2:

I have found the solution to my qns. Please take a look.

$.ajax({
        url: URL_TO_GET_JSON,
        success: function(json, status) {
            var p = [];
            $.each(json, function(a,b){
                //DRAW IMAGES HERE.
            });
            $('.gallery').html(photo.join(''));


        // CREATE INSTANCES HERE        
            var myPhotoSwipe = $(".gallery a").photoSwipe({ 
                enableMouseWheel: false,
            })

          /********** UNSET INSTANCES HERE *****************/

            $(document).bind('pagebeforechange', function(e) {
                if ($('.ps-carousel').length) {
                    $('body').removeClass('ps-active');
                    var photoSwipe = window.Code.PhotoSwipe;
                    var photoSwipeInstance = photoSwipe.getInstance($(myPhotoSwipe).attr('id'));
                    if (typeof photoSwipeInstance != "undefined" && photoSwipeInstance != null) {
                        photoSwipe.unsetActivateInstance(photoSwipeInstance);
                        photoSwipe.detatch(photoSwipeInstance);
                    }
                }
            });
        }
    });

回答3:

I had up voted another answer but after more testing realised it wasn't working consistently. After looking through the photoswipe source code I realised it was better to use their own hide() function rather than try to figure out a different way of closing it down.

This still isn't perfect for me, sometimes the back button will just close the overlay and other times it moves back to the previous page, which I don't want. But at least this way I'm never stuck after pressing back.

I use the array of instances returned by the photoSwipe object and check if it's visible by documentOverlay being set:

$(document).on('pagebeforechange', function(e) {
if ($('.ps-carousel').length) {
  var photoSwipe = window.Code.PhotoSwipe;
  for( i = 0 ; i < photoSwipe.instances.length ; i++ )
  {
    if( !Code.Util.isNothing( photoSwipe.instances[i].documentOverlay ) ) 
    {
      photoSwipe.instances[i].hide();
    }
  }
 }
});

来源：https://stackoverflow.com/questions/12089688/photoswipe-jqm-back-event-issue