2

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

在 itemPage 上，我放置了处理 photoswipe 库的代码，但是它没有按我的预期工作，因为页面的内容是通过 ajax 加载的（我必须进行完全刷新才能加载 photoswipe 脚本）我知道我可以解决这个问题，使用 rel="external" 调用 subctageory 级别的链接，但这会导致 Itempage 上的完全刷新，我想保持页面之间的平滑过渡。所以我需要知道如何在页面加载之前设置 photoswipe 的代码。

下面的代码来自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>

我把脚本放在里面来处理画廊，<div data-role="page" id="Home"> 因为如果我把代码放在头中，永远不会为 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!');
          });

但是我如何调用 photoswipe 脚本，如果我将警报函数中的代码替换为

(function(window, PhotoSwipe){

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

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

            }, false);


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

它不工作？页面无法加载希望您能帮助我！

谢谢

4

2 回答 2

1

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

我正在使用它，它还可以确保您可以在多页上调用多个照片滑动库，并且还允许图像使用不同的 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));
于 2012-03-24T08:24:16.257 回答
0

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

同样，添加index.html到链接到portfolio.html。

如果您在主页上有幻灯片放映，也可以添加到链接portfolio.html。index.html

于 2012-07-28T16:08:34.713 回答