Question

$(document).on("pagecreate", function() {
            $.jsonp({
                url: 'URL_TO_GET_JSONP',
                callbackParameter: 'get_photo',
                success: function(json, status) {
                    var photo = [];
                    var path = 'URL_TO_GET_JSONP';
                    $.each(json, function(a,b){
                        photo.push('');
                        photo.push('');
                        photo.push('');
                    });
                    $('.gallery').html(photo.join(''));

                    var myPhotoSwipe = $(".gallery a").photoSwipe({ 
                        enableMouseWheel: false,
                    })
                },
                error: function(){
                    alert("Unable to load photos.");
                }
            });
        });

我遇到了图库和浏览器后退按钮的问题。用户更有可能按下他们的后退按钮离开画廊而不是小（x）按钮。问题是，当您使用后退按钮时，您最终会在空白页面上没有导航或内容只是页面背景。（例如：http://www.photoswipe.com/latest/examples/04-jquery-mobile.html）

是否有任何解决方法？

Answer 1

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

jQuery Mobile使用哈希将页面保留在历史记录中并导航回来。当使用Photoswipe进入轮播模式时，事件处理程序附加到后退事件（关闭（x）按钮只不过是回溯到图库索引页面）。使用close（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）

，则需要更改'div.gallery-page'

Answer 2

我找到了解决问题的方法。请看一下。

$.ajax({
        url: URL_TO_GET_JSON,
        success: function(json, status) {
            var p = [];
            $.each(json, function(a,b){
                //DRAW IMAGES HERE.
            });
            $('.gallery').html(photo.join(''));


        // CREATE INSTANCES HERE        
            var myPhotoSwipe = $(".gallery a").photoSwipe({ 
                enableMouseWheel: false,
            })

          /********** UNSET INSTANCES HERE *****************/

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

我已经投了另一个答案，但经过更多的测试后发现它不能持续工作。在查看了照片源代码后，我意识到最好使用自己的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();
    }
  }
 }
});

Photoswipe + JQM：回事件问题

3 个答案: