縮圖網格問題

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

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

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

2013-04-05 bitfidelity

對於兩個<ul>元素，都不能使用相同的ID - 這就是爲什麼只有第一個列表有效，因爲jQuery只會選擇第一個匹配項。你將不得不使用不同的ID（不太實際），或者直接使用一個類（適用於所有需要效果的<ul>元素）。

的選擇是在你的grid.js文件，行167：

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

嘗試使用不同的選擇，如：

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

來源

2013-04-05 16:30:58 Terry

只是打敗我吧！ – dsundy 2013-04-05 16:33:29

謝謝，特里。我改變了grid.js中的選擇器，第二個網格現在被點擊時展開，但它的一些功能似乎已被破壞。擴展後箭頭粘在原地，向下推動的縮略圖位置不會恢復到正常網格。我想嘗試使用不同的ID，但我對JavaScript很新，並且不確定如何將新ID集成到grid.js. – bitfidelity 2013-04-05 17:00:26

BitFidelity，我有同樣的問題，解決它只是通過將<li class="divider">插入縮略圖，然後設計該類（即，display:block; margin-top:200px;

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

來源

2013-06-06 04:08:58 James

我已經創造了grid.js一個新的功能，會發現"og-expanded" 類並刪除其內聯CSS和showPreview()功能和initItemsEvents()函數調用這個函數。

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

來源

2016-08-22 13:12:00 user3888958

縮圖網格問題

回答

相關問題