縮略圖網格問題

Question

我希望有人可以看看這個頁面上的縮略圖網格，並幫助我理解為什么第一個功能，但第二個功能沒有。

http://bitfidelity.com/temp/index.html

兩者都應該在單擊時展開，但第二個圖像只是作為常規圖像鏈接。 我假設我必須唯一地標識每個縮略圖網格，以便腳本激活不止一次，但我不知道如何去做。

該網格取自http://tympanus.net/codrops/2013/03/19/thumbnail-grid-with-expanding-preview上的codrops文章。

Answer 1

您不能對兩個<ul>元素使用相同的ID - 這就是為什么只有第一個列表有效，因為jQuery只會選擇第一個匹配項。 您將不得不使用不同的ID（不太實用），或者僅使用類（適用於您希望效果處理的所有<ul>元素）。

選擇器位於grid.js文件中，第167行：

var $grid = $('#og-grid'),

嘗試使用其他選擇器，例如：

var $grid = $('.og-grid'),

Answer 2

BitFidelity，我遇到了同樣的問題並通過在縮略圖中插入<li class="divider">然后設置該類的樣式（即display:block; margin-top:200px;

基本上，您只需將分隔符插入單個實例，而不是創建網格的兩個實例。 我使用H3來標題網格的每個部分。 希望這可以幫助。

Answer 3

我在grid.js創建了一個新函數，它將找到類"og-expanded"並刪除其內聯css並在showPreview()函數和initItemsEvents()函數中調用此函數。

function removeinlinecss(){ $ ('ul li').each(function(){
    if($(this).hasClass('og-expanded')){ $(this).removeAttr("style");}});
}