Jquery mobile Photosweep直接全屏打开照片

我想用jQuery Mobile全屏直接打开Photosweep gallery，而不是默认的

列表。我在

从插件网站下载的软件包（08 exclusive mode.html），但我无法在我的网站上使用

我尝试了以下javascript代码：

$(document).on('pageshow','#photo', function() {
  (function(window, PhotoSwipe) {
    document.addEventListener('DOMContentLoaded', function() {
    var options = {
     preventHide: true },
     instance = PhotoSwipe.attach( window.document.querySelectorAll('#Gallery a'), options );
     instance.show(0);
   }, false);
  } (window, window.Code.PhotoSwipe));
});

这是html页面：

<div data-role="page" id="photo">
    <div data-role="header">
        <h1>Second</h1>
    </div><!-- /header -->
    <div data-role="content">
       <ul id="Gallery" class="gallery">
         <li><a href="/ico4.jpg" rel="external"><img src="/ico.jpg" alt="Image 001" /></a></li>
         <li><a href="/ico4.jpg" rel="external"><img src="/ico.jpg" alt="Image 002" /></a></li>
         <li><a href="/ico4.jpg" rel="external"><img src="/ico.jpg" alt="Image 003" /></a></li>
         <li><a href="/ico4.jpg" rel="external"><img src="/ico.jpg" alt="Image 004" /></a></li>
         <li><a href="/ico4.jpg" rel="external"><img src="/ico.jpg" alt="Image 005" /></a></li>
         <li><a href="/ico4.jpg" rel="external"><img src="/ico.jpg" alt="Image 006" /></a></li>
         <li><a href="/ico4.jpg" rel="external"><img src="/ico.jpg" alt="Image 007" /></a></li>
         <li><a href="/ico4.jpg" rel="external"><img src="/ico.jpg" alt="Image 008" /></a></li>
         <li><a href="/ico4.jpg" rel="external"><img src="/ico.jpg" alt="Image 009" /></a></li>
         <li><a href="/ico4.jpg" rel="external"><img src="/ico.jpg" alt="Image 010" /></a></li>
       </ul>
     </div><!-- /content -->
     <div data-role="footer">
       <h4>Page Footer</h4>
    </div><!-- /footer -->
</div>


第二












页脚

你能帮我吗？
工作示例：

Javascript:

这就足够用jQuery Mobile 1.3.1运行Photoswip了

$(document).on('pagebeforeshow', '#index', function(){   
    var myPhotoSwipe = $(".gallery li a").photoSwipe({
        jQueryMobile: true,
        loop: false,
        enableMouseWheel: false,
        enableKeyboard: false
    });

    myPhotoSwipe.show(0);      
});

工作示例：

Javascript:

这就足够用jQuery Mobile 1.3.1运行Photoswip了

$(document).on('pagebeforeshow', '#index', function(){   
    var myPhotoSwipe = $(".gallery li a").photoSwipe({
        jQueryMobile: true,
        loop: false,
        enableMouseWheel: false,
        enableKeyboard: false
    });

    myPhotoSwipe.show(0);      
});

如果您不知道项目的键，可以循环“instance.originalImages”并在图像路径中搜索关键字

for(var i=0; i<instance.originalImages.length; i++){
  if(instance.originalImages[i].pathname.search(keyword)!= -1){
     instance.show(i);  
  }
}

for（var i=0；i如果不知道项目的键，可以循环“instance.originalImages”并在图像路径中搜索关键字

for(var i=0; i<instance.originalImages.length; i++){
  if(instance.originalImages[i].pathname.search(keyword)!= -1){
     instance.show(i);  
  }
}

用于（var i=0；我在Google Chrome和Firefox中试过这个例子，效果很好。但当我在我的设备中试过这个例子时，它根本不起作用，而且似乎是css问题！有什么想法吗？@gajotres你能给出你对这个问题的看法吗？我在Google Chrome和Firefox中试过这个例子，效果很好。但是当我在m中试过这个例子时y设备，它就是不工作，而且似乎这是一个css问题！有什么想法吗？@gajotres你能谈谈你对这个问题的看法吗