ajax - jquerymobileページ内に写真スワイプを統合する方法は?

Question

jquerymobile アプリケーション内に写真スワイプを実装しようとしています。jquerymobile と Django を使用してアプリケーションを開発していますが、ページの 1 つにギャラリーをセットアップしたいと考えています。基本的には 3 つのページがあり、ページ 1 はカテゴリインデックスであり、次に各カテゴリのサブカテゴリインデックスを取得し、最後に詳細アイテムページに移動します。

itemPage に、写真スワイプライブラリを処理するコードを配置しましたが、ページのコンテンツが ajax 経由で読み込まれるため、期待どおりに動作しません (写真スワイプスクリプトを読み込むには、完全に更新する必要があります)。サブカテゴリレベルのリンクを rel="external" で呼び出して問題を解決できますが、これにより Itempage が完全に更新されるため、ページ間のスムーズな移行を維持したいと考えています。そのため、ページを読み込む前に写真スワイプのコードをセットアップする方法を知る必要があります。

以下のコードはitemPageレベルのものです（写真スワイプデモのコードを中に入れました）

<!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>

ギャラリーを処理するスクリプトを内部<div data-role="page" id="Home"> に配置しました。コードをヘッドに配置すると、ajax 呼び出しに対して実行されることはありません。ただし、上記のコードを実行すると、ページに最後のレベルが表示されません（アイテムページは表示されません）<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!');
          });

しかし、どのように写真スワイプスクリプトを呼び出すことができますか、アラート関数のコードを次のように置き換えた場合

(function(window, PhotoSwipe){

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

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

            }, false);


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

それは動作しませんか？ページがロードされない

ありがとう

score 1 · Accepted Answer

Photoswipe が提供する例と、サンプルギャラリーで photoswipe を初期化する方法を確認する必要があります。

私はこれを使用しています。これにより、複数ページで複数の photoswipe-gallery を呼び出すことができ、画像用に異なる HTML コンテナーを使用することもできます。必要に応じて自由に変更してください。

(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));

score 0 · Accepted Answer

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

同様に、 toindex.htmlを link toに追加しportfolio.htmlます。

ホームページにスライドショーがある場合は、同様にリンクを追加しportfolio.htmlますindex.html。

ajax - jquerymobileページ内に写真スワイプを統合する方法は?

2 に答える 2

Related

Reference