デフォルトのリストではなく、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>
手伝って頂けますか?