我在最近使用jQueryMobile的移动应用程序中实现了神话般的photoswipe图书馆,我遇到了与iOS 5一起使用它的一个小问题(可能是其他人,但我'我只有iOS 5设备)。iOS上的Photoswipe图库关闭事件
下面是一个实现的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();
});
这工作就像在Android上的魅力,但什么都没有发生在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>