PhoneGap中文网
标题:
使用photoswipe插件时,没有效果
[打印本页]
作者:
woniu
时间:
2013-10-25 12:55
标题:
使用photoswipe插件时,没有效果
我在使用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>
复制代码
作者:
爱哭的鱼
时间:
2013-10-25 12:56
我是来刷分的,嘿嘿顺便学习一下
作者:
woniu
时间:
2013-10-25 13:02
爱哭的鱼 发表于 2013-10-25 12:56
我是来刷分的,嘿嘿顺便学习一下
你还抢到了沙发 - -
作者:
admin
时间:
2013-10-25 14:32
用官方提供的插件例子试试
作者:
woniu
时间:
2013-10-25 20:15
admin 发表于 2013-10-25 14:32
用官方提供的插件例子试试
我就是用的官方的。我把它的复制过来了。可是还是不行啊。我上面贴了代码的。和官网的一模一样,当然里面的class名肯定是不一样的,但是我也改了的。树根老师帮我仔细看看吧
作者:
binxu1988
时间:
2013-10-30 11:23
哎 我也没弄懂 求视频教程!~
欢迎光临 PhoneGap中文网 (http://bbs.phonegap100.com/)
Powered by Discuz! X3.2