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打開照片直接全屏

回答

相關問題