缩图网格问题

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

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

网格取自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

缩图网格问题

回答

相关问题