Я пытаюсь реализовать photoswipe внутри моего приложения jquerymobile. Я использую jquerymobile & Django для разработки моего приложения, и теперь я хочу настроить галерею на одной моей странице. В основном у меня 3 страницы, страница 1 является индексом категории, затем я получил индекс подкатегории для каждой категории и, наконец, я перешел на страницу подробных статей.Как интегрировать photoswipe внутри jquerymobile-страниц?
На itemPage я поместил код для обработки библиотеки photoswipe, но он не работает так, как я ожидал, потому что содержимое страницы загружается через ajax (я должен сделать полное обновление, чтобы загрузить сценарии photoswipe) Я знаю, что могу решить проблему, вызвав подклассовые ссылки уровня с rel = "external", но это вызывает общее обновление на странице Itempage, и я хочу сохранить плавные переходы между страницами. Так что мне нужно знать, как настроить код для 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>© 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>
я поставил скрипт для обработки галереи внутри <div data-role="page" id="Home"> так Если я ставлю код в голове никогда не выполняется для вызова ajax. Однако, когда я выполнил код выше, страница не отображается последний уровень (никогда не появляется ItemPage) Я думаю, что проблема может быть исправлена изменение þér путь загрузки страницы с некоторым кодом, как показано ниже в <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));
это не работает? страница не загружается Надеюсь, вы можете мне помочь!
Благодаря