2
我想我在Photoswipe中发现了一个错误，我需要一些帮助。以下代码是为使用Photoswipe的移动应用程序制作的页面。在一个单一的HTML文件，你有两个页面，所有工作正常：Jquery Mobile Photoswipe无法处理外部页面
<html>
<head>
<meta charset="utf-8" />
<title>Photoswipe test</title>
<meta name=viewport content="user-scalable=no, width=device-width" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="stylesheet" href="jquery.mobile-1.1.1.css" />
<link rel="stylesheet" href="js/photoswipe/styles.css" />
<link rel="stylesheet" href="js/photoswipe/photoswipe.css" />
<script type="text/javascript" src="js/photoswipe/lib/klass.min.js"></script>
<script src="jquery-1.7.2.js"></script>
<script src="jquery.mobile-1.1.1.js"></script>
<script type="text/javascript" src="js/photoswipe/code.photoswipe.jquery-3.0.5.min.js"></script>
<script type="text/javascript">
(function(window, $, PhotoSwipe){
$(document).ready(function(){
var options = {};
$("#Gallery a").photoSwipe(options);
});
}(window, window.jQuery, window.Code.PhotoSwipe));
</script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header" data-position="fixed">
<h1>My Gallery</h1>
</div>
<div data-role="content">
<p style="text-align:center;"><a href="#mygallerypage">Click to visit the gallery</a> </p>
</div>
</div>
<div data-role="page" id="mygallerypage" data-add-back-btn="true" class="gallery-page">
<div data-role="header" data-position="fixed">
<h1>My Gallery</h1>
</div>
<div data-role="content">
<ul id="Gallery" class="gallery">
<li><a href="photos/1LY6TZAV.jpg" rel="external"><img src="photos/thumbs/1LY6TZAV.jpg" /></a></li>
<li><a href="photos/16D20982.jpg" rel="external"><img src="photos/thumbs/16D20982.jpg" /></a></li>
<li><a href="photos/5W1BTW3Y.jpg" rel="external"><img src="photos/thumbs/5W1BTW3Y.jpg" /></a></li>
</ul>
</div>
</div>
</body>
</html>
现在。我需要使用参数和JSON加载我的应用程序的图像。所以，我尝试将图库放在外部页面上。它不起作用。拇指正确显示，但当您按下其中一个图像时，它将作为常用链接加载，并且图库会打开appart。下面是代码：
的Index.html：
<html>
<head>
<meta charset="utf-8" />
<title>Photoswipe test</title>
<meta name=viewport content="user-scalable=no, width=device-width" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<link rel="stylesheet" href="jquery.mobile-1.1.1.css" />
<link rel="stylesheet" href="js/photoswipe/styles.css" />
<link rel="stylesheet" href="js/photoswipe/photoswipe.css" />
<script type="text/javascript" src="js/photoswipe/lib/klass.min.js"></script>
<script src="jquery-1.7.2.js"></script>
<script src="jquery.mobile-1.1.1.js"></script>
<script type="text/javascript" src="js/photoswipe/code.photoswipe.jquery-3.0.5.min.js"></script>
<script type="text/javascript">
(function(window, $, PhotoSwipe){
$(document).ready(function(){
var options = {};
$("#Gallery a").photoSwipe(options);
});
}(window, window.jQuery, window.Code.PhotoSwipe));
</script>
</head>
<body>
<div data-role="page" id="home">
<div data-role="header" data-position="fixed">
<h1>My Gallery</h1>
</div>
<div data-role="content">
<p style="text-align:center;"><a href="mygallery.html">Click to visit the gallery</a></p>
</div>
</div>
</body>
</html>
mygallery.html：
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<div data-role="page" id="mygallerypage" data-add-back-btn="true" data-transition="slide" class="gallery-page">
<div data-role="header" data-position="fixed">
<h1>My Gallery</h1>
</div>
<div data-role="content">
<ul id="Gallery" class="gallery">
<li><a href="photos/1LY6TZAV.jpg" rel="external"><img src="photos/thumbs/1LY6TZAV.jpg" /></a></li>
<li><a href="photos/16D20982.jpg" rel="external"><img src="photos/thumbs/16D20982.jpg" /></a></li>
<li><a href="photos/5W1BTW3Y.jpg" rel="external"><img src="photos/thumbs/5W1BTW3Y.jpg" /></a></li>
</ul>
</div>
</div>
</body>
</html>
任何想法可能是错误的或者它可能与Photoswipe一个问题吗？我需要在我的应用程序上实现动态生成的图库。