2012-05-09 9 views
0

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> 
+0

私は同じ問題を抱えています。標準のjquery呼び出しを使用するとスワイプを読み込むことができますが、ページを拡大表示すると黒くなります。もしそうでなければ、リンクを「スワイプ可能」として登録することはできません。 –

+0

問題は実際に私が#IDsの.netを使用していたことでした。だからクラスに変更すればうまくいきます。 – Paparappa

答えて

0

クラス名 "ギャラリー" を置き換えるために "ギャラリーページ" これが私のコードです。

関連する問題