PhoneGap中文网

标题: 使用photoswipe插件时,没有效果 [打印本页]

作者: woniu    时间: 2013-10-25 12:55
标题: 使用photoswipe插件时,没有效果
我在使用photoswipe插件时,发现在链入展示图片的那个页面下图片没有那种效果,是没有任何效果,而且在链入这个页面的时候,还要加上rel="external"这个属性才能链入成功这个页面,jquerymobile默认是ajax调用,但是我测试的时候不行,不知道为什么。代码如下,大家帮我看看是什么原因呢?
  1. <!DOCTYPE HTML>
  2. <html lang="en-US">
  3. <head>
  4.         <meta charset="UTF-8">
  5.         <title></title>
  6.         <link rel="stylesheet" href="">
  7.         <link href="jquery.mobile-1.3.2.css" rel="stylesheet" type="text/css"/>
  8.         <link rel="stylesheet" href="photoswipe.css">
  9.         <script src="jquery.js" type="text/javascript"></script>
  10.         <script src="jquery.mobile-1.3.2.js" type="text/javascript"></script>
  11.         <script src="cordova.js" type="text/javascript"></script>
  12.         <script src="klass.min.js"></script>
  13.         <script src="code.photoswipe-3.0.5.js"></script>
  14.         <script>
  15.         $(function(){
  16.        
  17.                                
  18.                                 $('div#bookpic')
  19.                                         .live('pageshow', function(e){
  20.                                                
  21.                                                 var
  22.                                                         currentPage = $(e.target),
  23.                                                         options = {},
  24.                                                         photoSwipeInstance = $("ul.gallery a", e.target).photoSwipe(options,  currentPage.attr('id'));
  25.                                                        
  26.                                                 return true;
  27.                                                
  28.                                         })
  29.                                        
  30.                                         .live('pagehide', function(e){
  31.                                                
  32.                                                 var
  33.                                                         currentPage = $(e.target),
  34.                                                         photoSwipeInstance = PhotoSwipe.getInstance(currentPage.attr('id'));

  35.                                                 if (typeof photoSwipeInstance != "undefined" && photoSwipeInstance != null) {
  36.                                                         PhotoSwipe.detatch(photoSwipeInstance);
  37.                                                 }
  38.                                                
  39.                                                 return true;
  40.                                                
  41.                                         })
  42.                                
  43.                         })
  44.         </script>
  45. </head>
  46. <body>
  47.         <div data-role="page">
  48.                 <header data-role="header">Photo Swipe插件</header>
  49.                 <section data-role="content">
  50.                         <ul data-role="listview" data-inset="true">
  51.                                 <li data-role="list-divider">请选择所属专题</li>
  52.                                 <li><a href="#bookpic"> 图书作品集</a></li>
  53.                                 <li><a href="#">个人生活集</a></li>
  54.                         </ul>
  55.                 </section>
  56.                 <footer data-role="footer">@213</footer>
  57.         </div>
  58.         <div data-role="page" id="bookpic">
  59.                 <header data-role="header">图书作品集展示</header>
  60.                 <section data-role="content">
  61.                         <ul class="gallery">
  62.                                 <li>
  63.                                         <a href="images/Chrysanthemum.jpg" rel="external">
  64.                                                 <img src="images/Chrysanthemum.jpg" title="图片" alt="图片展示"/>
  65.                                         </a>
  66.                                 </li>
  67.                                 <li>
  68.                                         <a href="images/Desert.jpg" rel="external">
  69.                                                 <img src="images/Desert.jpg" title="图片" alt="图片展示"/>
  70.                                         </a>
  71.                                 </li>
  72.                                 <li>
  73.                                         <a href="images/Hydrangeas.jpg" rel="external">
  74.                                                 <img src="images/Hydrangeas.jpg" title="图片" alt="图片展示"/>
  75.                                         </a>
  76.                                 </li>
  77.                                 <li>
  78.                                         <a href="images/Koala.jpg" rel="external">
  79.                                                 <img src="images/Koala.jpg" title="图片" alt="图片展示"/>
  80.                                         </a>
  81.                                 </li>
  82.                                 <li>
  83.                                         <a href="images/Lighthouse.jpg" rel="external">
  84.                                                 <img src="images/Lighthouse.jpg" title="图片" alt="图片展示"/>
  85.                                         </a>
  86.                                 </li>
  87.                                 <li>
  88.                                         <a href="images/Penguins.jpg" rel="external">
  89.                                                 <img src="images/Penguins.jpg" title="图片" alt="图片展示"/>
  90.                                         </a>
  91.                                 </li>
  92.                         </ul>
  93.                 </section>
  94.                 <footer data-role="footer">@2013</footer>
  95.         </div>
  96. </body>
  97. </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