如何整合photoswipe里面jquerymobile网页？ [英] How to integrate photoswipe inside jquerymobile pages?
问题描述
我想实现photoswipe我jquerymobile应用程序中。 我使用jquerymobile和放大器; Django的开发我的应用程序，现在我想设置在一个我的网页画廊。 基本上我有3页，第1页是类指数，然后我得到一个子类别指数为每个类别，最后我转到一个详细的项目页面。
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.
在我把code处理photoswipe库但它不工作，如我所料，因为网页的内容是通过AJAX加载itemPage（我必须做一个完全刷新，以便加载photoswipe脚本） 我知道我可以解决这一问题，要求用相对=外部的subctageory层面的联系，但是这造成Itempage共刷新，我想保持页面之间的平滑过渡。 所以，我需要知道如何设置$ C $下photoswipe之前，页面加载。
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.
在code以下是从itemPage级别（我把code从photoswipe演示中）
The code below is from the itemPage level( I put the code from the photoswipe demo inside)
<!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>© 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>© 2011 Code Computerlove</h4>
</div>
</div>
</div>
</body>
</html>
我把脚本来处理内部的＆LT画廊; DIV数据角色=页面ID =家＆GT;
因为如果我把code在头部永远不会执行AJAX调用。
然而，当我执行code以上时，页面不显示最后一个级别（itempage永远不会出现）
我想这个问题可以是固定的更换疗法的方式在页面加载一些code像下面里面＆LT; DIV数据角色=页面ID =家＆GT;
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">
$( document ).delegate("#Home", "pagebeforecreate", function() {
alert('A page with an ID of "aboutPage" is about to be created by jQuery Mobile!');
});
但我怎么能叫photoswipe剧本，如果我换成从报警功能的code与
but how I can call the photoswipe script, If I replaced the code from alert function with
(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!
感谢
推荐答案
您应该看一看在的例子通过Photoswipe提供，它们是如何初始化photoswipe在他们的样本画廊。
You should take a look at the examples provided by Photoswipe and how they are initializing photoswipe in their sample galleries.
我用这个，这也保证了你可以拨打一个多多个photoswipe，画廊，也允许不同的HTML容器的图像。随意modifiy您的需要：
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:
(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));
这篇关于如何整合photoswipe里面jquerymobile网页？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
