jwerymobileページ内のphotoswipeを統合するには？

jquerymobileアプリケーション内でphotoswipeを実装しようとしています。私はアプリケーションを開発するためにjquerymobile & Djangoを使用しています。今では1つのページにギャラリーをセットアップしたいと思います。基本的に私は3ページあり、ページ1はカテゴリインデックスです。次に、各カテゴリのサブカテゴリインデックスを取得し、最終的には詳細アイテムページに移動します。jwerymobileページ内のphotoswipeを統合するには？

私は、Photoswipeライブラリを処理するコードを入れましたが、ページの内容がajax経由でロードされているため、期待通りに動作しません（フォトワイプスクリプトを読み込むためには完全リフレッシュが必要です） rel = "external"とsubctageoryレベルのリンクを呼び出すことで問題を解決できることはわかっていますが、これがItempageのリフレッシュを引き起こし、ページ間のスムーズな移行を維持したいと考えています。ページ読み込み前にphotoswipeのコードを設定する方法を知る必要があります。

次のコードは、私が頭の中でコードを入れている場合ので、私は<div data-role="page" id="Home"> 内のギャラリーを処理するためにスクリプトを置く

<!DOCTYPE html> 
<html> 
<head> 
    <title>PhotoSwipe</title> 
    <meta name="author" content="Ste Brennan - Code Computerlove - http://www.codecomputerlove.com/" /> 
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" /> 
    <meta name="apple-mobile-web-app-capable" content="yes" /> 

    <link href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.css" rel="stylesheet" /> 
    <link href="{{ STATIC_URL }}styles/jquery-mobile.css" type="text/css" rel="stylesheet" /> 
    <link href="{{ STATIC_URL }}styles/photoswipe.css" type="text/css" rel="stylesheet" /> 

    <script type="text/javascript" src="{{ STATIC_URL }}scripts/lib/klass.min.js"></script> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script> 
    <script type="text/javascript" src="{{ STATIC_URL }}scripts/code.photoswipe.jquery-3.0.4.min.js"></script> 


</head> 
<body> 

<div data-role="page" id="Home"> 

    <script type="text/javascript"> 

     (function(window, PhotoSwipe){ 

      document.addEventListener('DOMContentLoaded', function(){ 

       var 
        options = {}, 
        instance = PhotoSwipe.attach(window.document.querySelectorAll('#Gallery a'), options); 

      }, false); 


     }(window, window.Code.PhotoSwipe)); 

    </script> 



    <div data-role="header"> 
     <h1>PhotoSwipe</h1> 
    </div> 


    <div data-role="content" > 

     <p>These examples show PhotoSwipe integrated with jQuery Mobile:</p>   

     <ul data-role="listview" data-inset="true"> 
      <li><a href="#Gallery1">First Gallery</a></li> 

     </ul> 

     <p>PhotoSwipe has also been designed to run stand-alone and can be easily integrated into your non jQuery/jQuery mobile websites:</p> 

     <ul data-role="listview" data-inset="true"> 
      <li><a href="01-default.html" target="_blank">Code Computerlove</a></li> 
     </ul> 

    </div> 

    <div data-role="footer"> 
     <h4>&copy; 2011 Code Computerlove</h4> 
    </div> 

</div> 


<div data-role="page" data-add-back-btn="true" id="Gallery1" class="gallery-page"> 

    <div data-role="header"> 
     <h1>First Gallery</h1> 
    </div> 

    <div data-role="content"> 

     <ul class="gallery"> 

      <li><a href="{{ STATIC_URL }}images/chichen1.jpg" rel="external"><img src="{{ STATIC_URL }}images/chichen1.jpg" alt="Image 001" /></a></li> 
      <li><a href="{{ STATIC_URL }}images/002.jpg" rel="external"><img src="{{ STATIC_URL }}images/thumb/002.jpg" alt="Image 002" /></a></li> 
      <li><a href="{{ STATIC_URL }}images/003.jpg" rel="external"><img src="{{ STATIC_URL }}images/thumb/003.jpg" alt="Image 003" /></a></li> 
      <li><a href="{{ STATIC_URL }}images/004.jpg" rel="external"><img src="{{ STATIC_URL }}images/thumb/004.jpg" alt="Image 004" /></a></li> 
      <li><a href="{{ STATIC_URL }}images/005.jpg" rel="external"><img src="{{ STATIC_URL }}images/thumb/005.jpg" alt="Image 005" /></a></li> 
      <li><a href="{{ STATIC_URL }}images/006.jpg" rel="external"><img src="{{ STATIC_URL }}images/thumb/006.jpg" alt="Image 006" /></a></li> 
      <li><a href="{{ STATIC_URL }}images/007.jpg" rel="external"><img src="{{ STATIC_URL }}images/thumb/007.jpg" alt="Image 007" /></a></li> 
      <li><a href="{{ STATIC_URL }}images/008.jpg" rel="external"><img src="{{ STATIC_URL }}images/thumb/008.jpg" alt="Image 008" /></a></li> 
      <li><a href="{{ STATIC_URL }}images/009.jpg" rel="external"><img src="{{ STATIC_URL }}images/thumb/009.jpg" alt="Image 009" /></a></li> 

     </ul> 

    </div> 

    <div data-role="footer"> 
     <h4>&copy; 2011 Code Computerlove</h4> 
    </div> 

</div> 

</div> 

</body> 
</html>

（私は内部のphotoswipeのデモからコードを置く）itemPageレベルからですajax呼び出しのために実行されることはありません。私は上記のコードを実行されると、ページが最後のレベル（itempageは表示されません）は表示されませんは、しかし、私はこの問題は、ページが<div data-role="page" id="Home">

$(document).delegate("#Home", "pagebeforecreate", function() { 
      alert('A page with an ID of "aboutPage" is about to be created by jQuery Mobile!'); 
      });

内部以下のようないくつかのコードをロードされるTHER方法を変更し、固定することができますね

私はphotoswipeスクリプトを呼び出すことができますどのように私は

(function(window, PhotoSwipe){ 

      document.addEventListener('DOMContentLoaded', function(){ 

       var 
        options = {}, 
        instance = PhotoSwipe.attach(window.document.querySelectorAll('#Gallery a'), options); 

      }, false); 


     }(window, window.Code.PhotoSwipe));

と、アラート機能からコードを交換した場合、それは動作しませんか？ページが読み込まれませんあなたが私を助けることを願っています！

おかげ

出典

2012-03-22 Tonymx

あなたはPhotoswipeによって提供さexamplesを見てみる必要があるとどのように彼らはサンプルギャラリーでphotoswipeを初期化しています。

私はこれを使用しているので、複数のphotoswipe-galleryを複数のページで呼び出すことができます。イメージ用に異なるHTMLコンテナも使用できます。あなたの必要性にmodifiyして自由に感じる：

(function (window, $, PhotoSwipe) { 

// still using live for photoswipe vs. on()/off() 
$('div:jqmData(role="page")').live('pageshow', function (e) { 

    var currentPage = $(e.target), 
     options = {}, 
     // allow multiple galleries 
     swipesOnPage = currentPage.find('.photoswipeable'); 

    // no photoswipe, we're done 
    if (swipesOnPage.length == 0) { 
     return false; 
    } 

    // if there are swipes init each 
    swipesOnPage.each(function (i) { 

     // make sure swipe is initialized once in case events bubble 
     if ($(this).data('photoswipe') != 'init') { 
      $(this).data('photoswipe', 'init'); 
      // init - make sure you add a class of swipeMe to your images!! 
      var photoSwipeInstance = $(this).find(":not('.cloned') a.swipeMe", e.target).photoSwipe(options, currentPage.attr('id')); 
     } 
     return true; 
    }); 
// un-init when leaving the page 
}).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));

出典

2012-03-24 08:24:16 frequent

は、サブページを呼び出しページにdata-ajax="false"を追加します。

同様に、index.htmlに追加してportfolio.htmlにリンクしてください。

ホームページにスライドショーを掲載している場合は、portfolio.htmlのindex.htmlにもリンクしてください。

出典

2012-07-28 16:08:34 Exprentice

jwerymobileページ内のphotoswipeを統合するには？

答えて

関連する問題