使用photoswipe插件时，没有效果

woniu · 发表于 2013-10-25 12:55:29

我在使用photoswipe插件时，发现在链入展示图片的那个页面下图片没有那种效果，是没有任何效果，而且在链入这个页面的时候，还要加上rel="external"这个属性才能链入成功这个页面，jquerymobile默认是ajax调用，但是我测试的时候不行，不知道为什么。代码如下，大家帮我看看是什么原因呢？

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" href="">
<link href="jquery.mobile-1.3.2.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" href="photoswipe.css">
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.mobile-1.3.2.js" type="text/javascript"></script>
<script src="cordova.js" type="text/javascript"></script>
<script src="klass.min.js"></script>
<script src="code.photoswipe-3.0.5.js"></script>
<script>
$(function(){
$('div#bookpic')
.live('pageshow', function(e){
var
currentPage = $(e.target),
options = {},
photoSwipeInstance = $("ul.gallery a", e.target).photoSwipe(options, currentPage.attr('id'));
return true;
})
.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;
})
})
</script>
</head>
<body>
<div data-role="page">
<header data-role="header">Photo Swipe插件</header>
<section data-role="content">
<ul data-role="listview" data-inset="true">
<li data-role="list-divider">请选择所属专题</li>
<li><a href="#bookpic"> 图书作品集</a></li>
<li><a href="#">个人生活集</a></li>
</ul>
</section>
<footer data-role="footer">@213</footer>
</div>
<div data-role="page" id="bookpic">
<header data-role="header">图书作品集展示</header>
<section data-role="content">
<ul class="gallery">
<li>
<a href="images/Chrysanthemum.jpg" rel="external">
<img src="images/Chrysanthemum.jpg" title="图片" alt="图片展示"/>
</a>
</li>
<li>
<a href="images/Desert.jpg" rel="external">
<img src="images/Desert.jpg" title="图片" alt="图片展示"/>
</a>
</li>
<li>
<a href="images/Hydrangeas.jpg" rel="external">
<img src="images/Hydrangeas.jpg" title="图片" alt="图片展示"/>
</a>
</li>
<li>
<a href="images/Koala.jpg" rel="external">
<img src="images/Koala.jpg" title="图片" alt="图片展示"/>
</a>
</li>
<li>
<a href="images/Lighthouse.jpg" rel="external">
<img src="images/Lighthouse.jpg" title="图片" alt="图片展示"/>
</a>
</li>
<li>
<a href="images/Penguins.jpg" rel="external">
<img src="images/Penguins.jpg" title="图片" alt="图片展示"/>
</a>
</li>
</ul>
</section>
<footer data-role="footer">@2013</footer>
</div>
</body>
</html>