Ошибка решетки эскизов

Question

Я надеялся, что кто-то сможет взглянуть на миниатюрные сетки на этой странице и помочь мне понять, почему первые функции, а вторая нет.

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

Оба должны расширяться при нажатии, но изображения во втором просто действуют как обычные ссылки на изображения. Я предполагаю, что я должен однозначно идентифицировать каждую сетку эскизов, чтобы сценарий активировался более одного раза, но я не уверен, как это сделать.

Сетка взята из статьи обложки в http://tympanus.net/codrops/2013/03/19/thumbnail-grid-with-expanding-preview.

Answer 1

Вы не можете использовать те же идентификаторы для обоих элементов <ul> - поэтому работает только первый список, поскольку jQuery будет выбирать только первое вхождение. Вам придется использовать другой идентификатор (не слишком практичный) или просто использовать вместо него класс (который применяется ко всем <ul> элементам, над которыми вы хотите, чтобы эффект работал).

Селектор находится в вашем grid.js файл, строка 167:

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

Попробуйте использовать другой селектор, как:

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

Answer 2

BitFidelity, у меня был тот же вопрос, и решать его просто вставляя <li class="divider"> в миниатюру, а затем стилируя этот класс (т. е. display:block; margin-top:200px;

По существу, скорее tha n создавая два экземпляра сетки, вы просто вставляете разделители в один экземпляр. Я использовал H3s для обозначения каждого раздела сетки. Надеюсь это поможет.

Answer 3

Я создал новую функцию в grid.js, которая найдет класс "og-expanded" и удалить его встроенный CSS и вызывать эту функцию в showPreview() функции и initItemsEvents() функции.

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