我正在使用 jquery mobile 创建一个网站,几乎一切都很好。但我有一个小问题,它与Photoswipe(http://www.photoswipe.com/)有关。
这就是发生的事情:
我有几个不同的案例页面按类别划分。当我进入一个案例站点时,我可以单击图库,图像会显示出来并且效果很好。但是,如果我从这个案例页面直接转到另一个案例页面并尝试打开那个画廊。什么都没发生。但是,如果我不直接转到另一个案例页面并转到(没有画廊)之间的页面,然后转到一个新案例。画廊将开放。我使用 jquery 移动标准 ajax 处理,因此每个页面都加载了 ajax,并且与<head>
.
图库图片是用 PHP 和 MySQL 加载的,但 id<ul>
始终相同;#画廊。
是否与此有关,当直接在具有相同 id 的画廊的页面之间移动时。它搞砸了什么?这是我的代码:
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'));
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));
$('div:jqmData(role="page")').live('pageinit',function(){
var options = {
jQueryMobile: true
};
$("#Gallery a").photoSwipe(options);
});
HTML
<ul id="Gallery" class="gallery">
<li><a href="01.jpg" rel="external"><img src="01.jpg" alt="1" /></a></li>
<li><a href="02.jpg" rel="external"><img src="02.jpg" alt="2" /></a></li>
</ul>