在移动设备上的JQuery Mobile App中使用Photoswipe的空白页

Question

I got a problem with an Photoswipe Gallery. The problem that I'm encountering is, thatI click on a thumbnail, the full page and its controls, together with the image are loading, and then just a blank page is shown.

This happens only on my mobile device (android 4.0.4), both in the standard browser and in chrome. But both firefox and chrome on my laptop are working fine.

I attached the chrome remote debugger, and everything seems working fine.

On chrome mobile the url-hash changes to #&ui-state=dialog in android standard browser, desktop chrome and firefox the hash doesn't alter and shows #pageid .

I tried to debugg the code, but I can't figuere out whats wrong.

The gallery markup is injected on a pagebeforechange event. And Photoswipe is initialized as follows:

(function(window, $, PhotoSwipe){
    $(document).ready(function(){
        console.log('document ready')

        $('div.gallery-page').live('pageshow', function(e){
            console.log('pageshow');
            var currentPage = $(e.target);
            var options = { enableMouseWheel: false , enableKeyboard: false };                    
            var photoSwipeInstance = $("ul.gallery a", e.target).photoSwipe(options,  currentPage.attr('id'));
            console.log(e.target);

            return true; 
        }).live('pagehide', function(e){

            var currentPage = $(e.target),
                photoSwipeInstance = PhotoSwipe.getInstance(currentPage.attr('id'));

            if (typeof photoSwipeInstance != "undefined" && photoSwipeInstance != null) {
                PhotoSwipe.detatch(photoSwipeInstance);
            }

            return true;
        });
    });

}(window, window.jQuery, window.Code.PhotoSwipe)); 

any idea on why the page goes blank, only on mobile devices?

//edit my workaround currently is doing that, on the pagebeforechange event:

if(window.location.hash.search(/ui-state=dialog/) !== -1 ) {
    console.log('ui-state anomaly');
    e.preventDefault();
}

Answer 1

I had the same problem and found the solution at https://github.com/codecomputerlove/PhotoSwipe/issues/375

Also replaced all ".live" with ".on" in the initial code you posted above. Make sure your replace the "YourGalleryDiv" with your own div.

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