jquery mobile を使用して Web サイトを作成していますが、ほとんどすべてがうまく機能します。しかし、少し問題があり、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>