在移動設備上的JQuery Mobile應用程序中使用Photoswipe的空白頁

我遇到了Photoswipe圖庫的問題。我遇到的問題是，我點擊縮略圖，整個頁面及其控件，加載圖像，然後只顯示一個空白頁面。在移動設備上的JQuery Mobile應用程序中使用Photoswipe的空白頁

這隻發生在我的移動設備上（android 4.0.4），無論是在標準的瀏覽器和鉻。但我的筆記本電腦上的Firefox和Chrome都正常工作。

我附加了chrome遠程調試器，並且一切似乎工作正常。

在Chrome移動版本中，android標準瀏覽器，桌面瀏覽器和firefox中的url-hash更改爲#&ui-state=dialog，哈希值不會更改並顯示#pageid。

我試圖調試代碼，但我無法想象出什麼是錯的。

圖庫標記注入pagebeforechange事件。和Photoswipe初始化如下：

(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));

任何想法爲什麼頁面變爲空白，僅在移動設備上？

//編輯我目前的解決方法是這樣做的，在pagebeforechange事件：

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

來源

2012-11-16 Angelo.Hannes

我有同樣的問題，並找到了解決辦法，在https://github.com/codecomputerlove/PhotoSwipe/issues/375

也全部換成「.live」與「.on」在您上面發佈的初始代碼中。確保您用自己的div替換「YourGalleryDiv」。

$(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); 
    } 
}); 
} 
});

來源

2012-12-02 18:42:01 Mike

在移動設備上的JQuery Mobile應用程序中使用Photoswipe的空白頁

回答

相關問題