fancybox，使圖片和div不是圖庫的幻燈片

我使用jQuery fancybox插件來創建圖片庫。用戶點擊圖像，然後顯示一個模式，瀏覽所有圖像。到目前爲止，所有事情都是用下面的代碼完成的。fancybox，使圖片和div不是圖庫的幻燈片

但我想要做的變化是在模態幻燈片放映。該幻燈片需要顯示被點擊的特定圖像以及不在圖庫中的其他圖像以及額外的div s。那些額外的圖像和divs可能留在代碼中的任何地方。

HTML：

<a class="fancybox" href="img/a_small.jpg" data-fancybox-group="gallery" title="Project"> 
<img src="img/a_big.jpg" alt="image project"/> 
</a> 

<a class="fancybox" href="img/b_small.jpg" data-fancybox-group="gallery" title="Project"> 
<img src="img/b_big.jpg" alt="image project"/> 
</a> 

<a class="fancybox" href="img/c_small.jpg" data-fancybox-group="gallery" title="Project"> 
<img src="img/c_big.jpg" alt="image project"/> 
</a>

JS：

$('.fancybox').fancybox({ 
    padding: 0, 
    openEffect : 'elastic', 
    openSpeed : 150, 
    closeEffect : 'elastic', 
    closeSpeed : 150, 
    closeClick : true, 
    'autoSize': false, 
    'autoWidth' : 600, 
    'autoScale'  : false, 
    'transitionIn' : 'none', 
    'transitionOut' : 'none', 
    'type'   : 'swf', 
    'autoCenter ' :true, 
    'aspectRatio':true 
});

1）如何實現這一目標？

2）如果fancybox不適合，有沒有其他腳本可以幫助您以響應式設計的方式達到目的？

編輯： 在線演示是here。

來源

2015-05-20 Istiaque Ahmed

我認爲你可以使用一些插件事件，比如'beforeLoad（）'或'beforeShow（）'。這個想法是添加圖像或任何你需要從那裏fancybox。 – kosmos

@kmsdev，我如何排除除了觸發的圖像之外的所有圖像並添加其他圖像？ doc中的任何線索？ –

這只是一個想法，但你可以克隆你的原始容器，刪除原來的項目，並添加一些新的。當模式關閉時，只需替換由克隆模塊修改的原始文件。 – kosmos

我一直在尋找，我發現如果您將data-fancybox-group添加到您想要添加到圖庫中的其他元素，fancybox會獲得它們並按預期工作。

檢查this jsFiddle作爲示例（圖像不加載在jsFiddle中，但如果您將代碼複製到文件中，您可以確定它是如何工作的）。

PS。你的圖像中有一些不正確的屬性。尋找width11=""和height11=""。

來源

2015-05-20 12:21:08 kosmos

添加可能包含按鈕等的新'div'是什麼？顯然，我希望其他圖像（不在圖庫中的圖像）和「div」隱藏在頁面中 –

關於不在圖庫中的圖像，只需使用'.fancybox'類和'data- attribute'。目前，我不知道它是否適用於div，我會看看。 – kosmos

對不起，正如我所看到的，它不適用於與同名圖像分組混合的div。你可以看到我到目前爲止所嘗試的[這裏]（http://i3rt2.kmsdev.net）。 – kosmos

fancybox，使圖片和div不是圖庫的幻燈片

回答

相關問題