Как открыть в лайтбоксе только отфильтрованные фото?

Question

[Сергей Маргелов]

Добрый день.
Помогите, пожалуйста.
Есть блок с миниатюрами. С помощью довольно простого кода, отфильтровываем по рубрикам с помощью jQuery. После этого, кликом по миниатюре можно запустить просмотр галлереи в лайтбоксе. Но беда в том, что мой код запускает все фото для просмотра, а хотелось бы, чтобы только те, которые выбраны до этого фильтром. Как это сделать?
Не могу понять, изменение присвоение или удаление класса lb никак не влияет на выборку и лайтбокс считает что этот класс есть у всех изображений.

Уверен, что решение будет достаточно простым, но мне оно не даётся. Я не волшебник, я только… Ну вы поняли.

Заранее спасибо

https://codepen.io/anon/pen/BOLXQX

Answer 1

[0xD34F]

А чем у вас сейчас отфильтрованные изображения отличаются от прочих? Видимостью. Под это дело у jquery есть специальный селектор, :visible. Вот с его помощью и отбирайте следующее изображение, например так.

UPD. Сразу не заметил, у вас там отфильтрованным изображениям назначается специальный класс - конечно, вместо :visible лучше использовать его (в примере по ссылке выше можно просто заменить одно на другое).

Comments

[Сергей Маргелов]

Подскажите, а как именно использовать специальный класс, если он уже зашит в переменную $li?
На данный момент с :visible всё работает. Огромное спасибо.

[0xD34F]

Написал же - просто замените :visible на ваш .lb.

[Сергей Маргелов]

0xD34F, именно так и сделал, но это не сработало, в отличие от первоначального варианта, поэтому и решил уточнить.

[0xD34F]

Значит, вы что-то неправильно сделали. Всё работает.

[Сергей Маргелов]

0xD34F, точно. Пропустил точку в названии класса в одном месте.
Огромное спасибо. Теперь потрачу часик на построчный разбор. Очень уж хочется разобраться как это заработало.

Answer 2

[Никита Мелихов]

Вроде бы, нужным группам изображения устанавливаешь атрибут rel="group_name". Тогда изображения будут перелистываться среди этой группы.

Comments

[Сергей Маргелов]

Не совсем понял. Когда это делать? Во время фильтрации? А что тогда делать до фильтрации, если пользователь откроет лайтбокс без выбора категории? Да и не выполняет ли в этом случае rel функцию моего динамического класса lb?

Answer 3

[tyzberd]

у fancybox есть такое https://codepen.io/fancyapps/pen/YQKPYX?editors=1010
или так же у него можно сделать так

var $links = $('.fancybox');

$links.on('click', function() {

	$.fancybox.open( $links, {
		// Custom options
	}, $links.index( this ) );

	return false;
});

т.е после фильтрации можна выбрать нужные блоки и навесить клик