jquery mobileを使用してウェブサイトを作成していますが、ほとんどすべてがうまくいきます。しかし、私は少し問題があり、それはPhotoswipe(http://www.photoswipe.com/)と関係があります。jQuery Mobile + Photoswipe、ギャラリーをロード中ajax?
これは何が起こるかです:
私は、カテゴリに分け、複数の異なるcasepagesを持っています。私がケーススタットに入ると、ギャラリーをクリックすると、画像が表示され、うまくいきます。しかし、このケースページから別のケースページに直接移動してそのギャラリーを開こうとすると、何も起こりません。しかし、もし私が直接別のcasepageに行き、taページ間に(ギャラリーはありません)、そして新しいケースに行くのであれば。ギャラリーが開きます。私はすべてのページにはajaxがロードされているので、jqueryモバイル標準のajax処理を使用して、<head>
の違いはありません。
ギャラリー画像はPHPとMySQLでロードされますが、<ul>
のIDは常に同じです。 #Gallery。
同じ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>
私は同じ問題を抱えています。標準のjquery呼び出しを使用するとスワイプを読み込むことができますが、ページを拡大表示すると黒くなります。もしそうでなければ、リンクを「スワイプ可能」として登録することはできません。 –
問題は実際に私が#IDsの.netを使用していたことでした。だからクラスに変更すればうまくいきます。 – Paparappa