Photoswipe打开照片直接全屏

我想用jQuery Mobile直接在全屏中打开Photoswipe图片库，而不是默认的<ul><li>列表。我看到了从插件网站（08-exclusive-mode.html）下载的
包的示例页面，但我无法在我的网站上运行它。Photoswipe打开照片直接全屏

我tryed这段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>

你能帮助我吗？

来源

2013-07-02 Henry8

工作例如：http://jsfiddle.net/Gajotres/PFqVs/

的Javascript：

这更多的则是足以运行Photoswipe与jQuery Mobile 1.3.1.

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

    myPhotoSwipe.show(0);  
});

来源

2013-07-02 15:14:32 Gajotres

非常感谢Gajotres！太棒了！ :-) – Henry8

我在谷歌浏览器和火狐浏览器中试过这个例子，它工作正常。但是当我在我的设备中尝试这个例子时，它不起作用，并且它看起来像是一个CSS问题！有任何想法吗？ –

@gajotres你可以给你这个问题的看法http://stackoverflow.com/questions/21629963/dynamically-loading-content-for-photoswipe – Priya

如果你不知道该项目的关键，你可以循环“instance.originalImages”并搜索ak图像路径中的眼睛。

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

来源

2014-03-13 12:07:43 Erdi

Photoswipe打开照片直接全屏

回答

相关问题