缩略图网格问题

Thumbnail grid issue

本文关键字：问题 网格 略图      更新时间：2023-09-26

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

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

都应该在点击时展开，但第二个图像只是作为常规图像链接。我假设我必须唯一地标识每个缩略图网格，以便脚本激活多次，但我不确定如何做到这一点。

该网格取自codrops的一篇文章http://tympanus.net/codrops/2013/03/19/thumbnail-grid-with-expanding-preview

您不能为两个<ul>元素使用相同的id -这就是为什么只有第一个列表有效，因为jQuery将只选择第一个出现。您将不得不使用一个不同的ID(不太实际)，或者简单地使用一个类来代替(应用于您希望效果起作用的所有<ul>元素)。

选择器在你的grid.js文件，第167行:

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

尝试使用不同的选择器，如:

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

BitFidelity，我有同样的问题，并通过插入<li class="divider">到缩略图，然后样式化该类(即display:block; margin-top:200px;

)简单地解决了它。

本质上，不是创建两个网格实例，而是将分隔符插入到单个实例中。我使用H3s来命名网格的每个部分。

我在grid.js中创建了一个新函数，它将找到"og-expanded"类并删除其内联css，并在showPreview()函数和initItemsEvents()函数中调用此函数。

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