2014-05-14 24 views
2

我在一個頁面中有很多圖片的漂亮圖庫,並且使用Fancybox以不同的「rel」屬性很好地顯示它們。但我想做一個「查看所有」選項來忽略「rel」並將它們全部加入到一個組中。我不想用js來更改HTML,因爲我有超過100張圖片,效率不高。另外我想避免建立一系列物品來告訴Fancybox顯示(出於同樣的原因)。那麼有沒有一種方法可以欺騙Fancybox,而不是通過「rel」進行分組,而是通過某些類或其他屬性?我可以將Fancybox 2分組爲不同於rel的屬性

我的(非常簡化的)HTML看起來像:

<div class="gallery"> 
    <a rel="group1" class="showall" href="image01-full.jpg"><img src="image01.jpg"/></a> 
    <a rel="group1" class="showall" href="image02-full.jpg"><img src="image02.jpg"/></a> 

    <a rel="group2" class="showall" href="image03-full.jpg"><img src="image03.jpg"/></a> 
    <a rel="group2" class="showall" href="image04-full.jpg"><img src="image04.jpg"/></a> 

    <a rel="group3" class="showall" href="image05-full.jpg"><img src="image05.jpg"/></a> 
    <a rel="group3" class="showall" href="image06-full.jpg"><img src="image06.jpg"/></a> 
</div> 

我定位我的最簡單的形式圖片:

$('.gallery a').fancybox(); 

所以我的圖像,然後通過相對的,如果在分組像3組這個例子。 我可以通過告訴按類「showall」對其進行分組嗎?或者唯一的方法是構建所有項目的數據數組,並在需要時將其作爲選項進行提供?

謝謝!

+0

哪些是您使用插件 - 的fancybox或的fancybox-2?你可以創建一個jsFiddle嗎?另外,你應該在詢問SO之前嘗試自己做一些事情。 – martynas

+0

@martynas:OP有'fancybox-2'標籤;) – JFK

+0

你不能同時有不同的分組設置,你可能需要觸發(也許有一個按鈕?)切換事件從分開的組到一個單(全)一個。我寫了這篇文章,可能會給你一個想法如何 - http://www.picssel.com/create-a-filtered-image-gallery-with-jquery-and-fancybox/(包括演示) – JFK

回答

相關問題