如何在jquerymobile页面中集成photoswipe？

我想在我的jquerymobile应用程序中实现photoswipe。我正在使用jquerymobile & Django开发我的应用程序，现在我想在我的页面上设置一个画廊。基本上我有3页，第1页是类别索引，然后我得到了每个类别的子类别索引，最后我得到了一个详细的项目页面。如何在jquerymobile页面中集成photoswipe？

在itemPage上，我把代码来处理photoswipe库，但它不工作，因为我预期，因为页面的内容通过ajax加载（我必须做一个全面刷新，以加载photoswipe脚本）我知道我可以解决这个问题，调用与rel =“external”的subctageory级别链接，但这会导致项目页面上的全部刷新，并且我希望保持页面之间的平滑过渡。所以我需要知道如何在页面加载之前设置photoswipe的代码。

下面的代码是从itemPage级别（我把代码里面photoswipe演示）

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

代替从报警功能的代码，它不工作？该页面无法加载希望你能帮助我！

感谢

来源

2012-03-22 Tonymx

你应该看看由Photoswipe提供的examples以及它们是如何在他们的样本画廊初始化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));

来源

2012-03-24 08:24:16 frequent

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

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

如果您在主页上有幻灯片放映，请将关于index.html加入链接。

来源

2012-07-28 16:08:34 Exprentice

如何在jquerymobile页面中集成photoswipe？

回答

相关问题