缩略图网格问题

Question

我希望有人可以看看这个页面上的缩略图网格，并帮助我理解为什么第一个功能，但第二个没有。

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

点击时两者都应该展开，但第二个图像只是作为常规图像链接。我假设我必须唯一地标识每个缩略图网格，以便脚本激活不止一次，但我不知道该怎么做。

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

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");}});
}