2012-06-05 4 views
0

Я реализовал сказочную библиотеку photoswipe в одном из моих последних мобильных приложений с помощью jQueryMobile, и я столкнулся с небольшой проблемой, используя его в тандеме с iOS 5 (могут быть другие, но я, ve получил только устройство iOS 5).Photoswipe gallery close event on iOS

Ниже внедренная Javascript

<script type="text/javascript"> 

    (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" && photoSwipeInstance != null) { 
          PhotoSwipe.detatch(photoSwipeInstance); 
         } 
         console.log($(e.target)); 
         history.back(); 

         return true; 

        }); 

     }); 

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

</script> 

В приведенном выше примере в значительной степени именно так, как руководство по осуществлению говорит с одной разницей: когда событие pageshow поднят и экземпляр был присоединен, я звоню "photoSwipeInstance.show (0);" чтобы немедленно отобразить галерею.

Все это прекрасно работает, за исключением того, что когда я закрываю галерею с панели инструментов, она возвращается к статической странице, а не к той странице, из которой она была вызвана.

Моя первая мысль заключалась в том, чтобы реализовать метод против события «onHide» и выполнить «history.back();» Заявление:

photoSwipeInstance.addEventHandler(PhotoSwipe.EventTypes.onHide, function (e) { 
    history.back(); 
}); 

Это работает как шарм на Android, но ничего не произошло прошивкой, так что я думал о двойной истории назад для IOS устройств:

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

}); 

Но все-таки не повезло, IOS просто сидит там и смеется надо мной. Кто-нибудь знает лучший способ перенаправить обратно на страницу, которая привязала экземпляр photoswipe, а не возвращаться на фактическую страницу html? Вот пример окончательного JS разметке:

<script type="text/javascript"> 

(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" && photoSwipeInstance != null) { 
         PhotoSwipe.detatch(photoSwipeInstance); 
        } 

        return true; 

       }); 

    }); 

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

</script> 

ответ

1

У меня была аналогичная проблема - я считаю, что это событие OnHide на прошивкой не стрелять, так что я решил ее прослушивания ToolBar, событий:

photoSwipeInstance.addEventHandler(PhotoSwipe.EventTypes.onToolbarTap, function(e){ 
if(e.toolbarAction === 'close'){ 
    //i needed to use a specific location here: window.location.href = "something"; 
    //but i think you could use the history back 
    history.back(); 
} 
});