jquery - Photoswipe + JQM：返回事件问题

Question

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

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

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

有什么解决办法吗？？？

Answer 1

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

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

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

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

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

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

以下代码对我有用：

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

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

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