如何在jquerymobile页面中集成photoswipe ?

I am trying to implement photoswipe inside my jquerymobile application. I am using jquerymobile & Django to develop my application and now I want to setup a gallery on one my pages. Basically I have 3 pages, page 1 is the the category index, then I got a subcategory index for each category and finally I goto a detail item page.

我正在尝试在我的jquerymobile应用程序中实现photoswipe。我正在使用jquerymobile和Django开发我的应用程序，现在我想在我的一个页面上设置一个图库。基本上我有3页，第1页是类别索引，然后我得到了每个类别的子类别索引，最后我得到了一个细节条目页面。

On the itemPage I put the code to handle the photoswipe library however it doesn't work as I expected because the content of the page is loaded via ajax ( I have to do a full refresh in order to load the photoswipe scripts) I know I can solve the issue, calling the subctageory level links with rel="external", but this cause a total refresh on Itempage and I want to keep the smooth transitions between pages. So I need to know how to setup the code for photoswipe before page load.

itemPage我把代码来处理photoswipe图书馆但是它不像我预期工作因为通过ajax加载页面的内容(我要做一个完整的刷新为了加载photoswipe脚本)我知道我可以解决这个问题,调用subctageory水平与rel =“外部”,但这导致总刷新itemPage我想保持页面之间的平滑过渡。因此，我需要知道如何在页面加载前设置photoswipe的代码。

The code below is from the itemPage level( I put the code from the photoswipe demo inside)

下面的代码来自itemPage级别(我将来自photoswipe demo的代码放在里面)

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

I put the script to handle the gallery inside <div data-role="page" id="Home"> since If I put the code in the head is never executed for the ajax call. However when I executed the code above, the page doesn't show the last level(itempage never appears) I guess the problem can be fixed changing ther way the page is loaded with some code like below inside <div data-role="page" id="Home">

我将处理

中的gallery的脚本放入，因为如果我将代码放入头部，ajax调用就不会执行。然而，当我执行上面的代码时，页面并没有显示最后一个级别(它永远不会出现)，我想问题可以通过改变页面加载方式来解决，比如

中的一些代码

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

but how I can call the photoswipe script, If I replaced the code from alert function with

但是如果我把代码从alert函数中替换掉的话，我怎么能调用photoswipe脚本呢?

(function(window, PhotoSwipe){

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

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

            }, false);


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

it doesn't work? the page doesn't load Hope you can help me!

它不工作?页面没有载入希望你能帮助我!

Thanks

谢谢

2 个解决方案

#1

You should take a look at the examples provided by Photoswipe and how they are initializing photoswipe in their sample galleries.

您应该看看Photoswipe提供的示例，以及他们如何在示例库中初始化Photoswipe。

I'm using this, which also ensures you can call more than one photoswipe-gallery on a multipage and also allows different HTML containers for the images. Feel free to modifiy to your need:

我正在使用它，它还确保您可以在多页上调用多个photoswipegallery，并允许不同的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));

#2

Add data-ajax="false" to the page calling the sub pages.

将data-ajax="false"添加到调用子页面的页面。

Similarly, add to index.html to link to portfolio.html.

同样地,添加索引。html链接到portfolio.html。

If you have a slide show on home page add to link on portfolio.html for index.html as well.

如果你在主页上有幻灯片展示，添加到文件夹的链接。html索引。html。

#1