我想用 jQuery Mobile 直接全屏打开 Photoswipe 画廊,而不是默认<ul>
<li>
列表。我看到了从插件站点 (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>
你能帮助我吗?