Photoswipe + JQM：返回事件问题答案

【问题标题】：Photoswipe + JQM: back event issuePhotoswipe + JQM：返回事件问题
【发布时间】：2014-03-07 22:12:35
【问题描述】：

$(document).on("pagecreate", function() {
            $.jsonp({
                url: 'URL_TO_GET_JSONP',
                回调参数：'get_photo'，
                成功：函数（json，状态）{
                    变种照片 = [];
                    var path = 'URL_TO_GET_JSONP';
                    $.each(json, 函数(a,b){
                        photo.push('

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

'); }); $('.gallery').html(photo.join('')); var myPhotoSwipe = $(".gallery a").photoSwipe({ 启用鼠标轮：假， }) }, 错误：函数（）{ alert("无法加载照片。"); } }); });

我在使用图库和浏览器后退按钮时遇到问题。与小 (x) 按钮相比，用户更有可能按下后退按钮以退出图库。问题是当您使用后退按钮时，您最终会看到一个没有导航或内容的空白页面，只有页面背景。（例如：http://www.photoswipe.com/latest/examples/04-jquery-mobile.html）

有什么办法解决吗？？？

【问题讨论】：

标签： jquery jquery-mobile jsonp photoswipe

【解决方案1】：

我自己还在寻找答案，但也许这对你有帮助。

jQuery Mobile 使用哈希将页面保存在历史记录中并向后导航。当使用 Photoswipe 进入轮播模式时，事件处理程序附加到后退事件（关闭 (x) 按钮只不过是在历史记录中返回到画廊索引页面）。使用关闭 (x) 按钮分离事件处理程序并将控制权交还给 jQuery Mobile。使用设备的后退按钮退出轮播不起作用，因为 jQuery Mobile 的哈希列表以某种方式被弄乱了。

如果我找到了修复，我会在这里发布。

（已编辑以添加解决方案。）

我找到了适合我的解决方案。

您需要做两件事： 1）从body标签中删除ps-active类 2) 找到所有照片滑动实例并取消设置

以下代码对我有用：

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

请注意，如果您使用的类与照片滑动示例中使用的类不同（例如http://www.photoswipe.com/latest/examples/04-jquery-mobile.html），则需要更改“div.gallery-page”

【讨论】：

嗨，这在我的情况下不起作用。我在phonegap中开发一个应用程序。请帮帮我

【解决方案2】：

我找到了我的 qns 的解决方案。请看一下。

$.ajax({ 网址：URL_TO_GET_JSON，成功：函数（json，状态）{ 变种 p = []; $.each(json, 函数(a,b){ //在这里画图。 }); $('.gallery').html(photo.join('')); // 在此处创建实例 var myPhotoSwipe = $(".gallery a").photoSwipe({ 启用鼠标轮：假， }) /********** 此处未设置实例 *****************/ $(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); } } }); } });

【讨论】：

谢谢，这对我有用。其他建议认为照片滑动 ID 错误。

【解决方案3】：

我对另一个答案投了赞成票，但经过更多测试后发现它并不能始终如一地工作。在查看了 photoswipe 源代码后，我意识到最好使用他们自己的 hide() 函数，而不是试图找出一种不同的方法来关闭它。

这对我来说仍然不是完美的，有时后退按钮只会关闭叠加层，而其他时候它会移回上一页，这是我不想要的。但至少这样我在按下后不会被卡住。

我使用 photoSwipe 对象返回的实例数组并检查它是否通过设置 documentOverlay 可见：

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

【讨论】：