Photoswipe + JQM:回溯事件问题 [英] Photoswipe + JQM: back event issue

问题描述

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

I am having issues with the gallery and the browser back buttons. Users are more likely to press their back button to get out of the gallery as opposed to the little (x) button. The problem is when you use the back button you end up at a blank page with no nav or content just the page background. (e.g: http://www.photoswipe.com/latest/examples/04-jquery-mobile.html)

有没有解决的办法?

推荐答案

我仍在寻找答案，但这也许对您有所帮助.

I am still looking for an answer myself, but maybe this helps you.

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

jQuery Mobile uses the hash to keep pages in history and navigate back. When going into the carousel mode with Photoswipe event handlers are attached to back event (the close (x) button is nothing more than going back in history to the gallery index page). Using the close (x) button detaches the event handlers and gives control back to jQuery Mobile. Using the device's back button to get out of the carousel does not work because somehow the hash list is messed up for jQuery Mobile.

如果找到修复程序，我会在此处发布.

If I find a fix I will post it here.

(已编辑以添加解决方案.)

(Edited to add a solution.)

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

I have found a solution that works for me.

您需要做两件事: 1)从body标签中删除ps-active类 2)找到所有photowipe实例并将其取消设置

There are two things you need to do: 1) remove the ps-active class from the body tag 2) find all photoswipe instances and unset them

以下代码对我有用:

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

请注意，如果您没有使用与photowipe示例相同的类(例如

Note that you need to change the 'div.gallery-page' if you are not using the same class as used in the photoswipe examples (such as http://www.photoswipe.com/latest/examples/04-jquery-mobile.html)

这篇关于Photoswipe + JQM:回溯事件问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！