iOS上的Photoswipe画廊关闭活动

Question

我最近使用jQueryMobile在我的一个移动应用程序中实现了令人难以置信的photoswipe库，在将它与iOS 5一起使用时遇到了一个小问题(可能是其他应用程序，但我只有一个iOS 5设备)。

下面是一个实现的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();
});

这在安卓上很有效，但在iOS上什么也没发生，所以我想到了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>

Answer 1

我遇到了一个类似的问题--我认为iOS上的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();
}
});