Функция «Следующая» в лайтбоксе все еще показывает элементы (li), которые были скрыты с помощью display: none;

У меня есть неупорядоченный список (ul) с тегами списка (li), и у меня есть некоторый jQuery, который фильтрует их на две группы. Как только вы нажмете элемент, в этом случае появится изображение, появится всплывающее окно. Здесь все работает (фильтрация элементов (li) в их соответствующие группы и световой блок).

Здесь проблема, когда у меня есть изображения, отфильтрованные, световая коробка имеет "следующую" функцию, которая отобразит следующее (li) изображение, даже если оно будет отфильтровано. Фильтр устанавливает миниатюру (li), которая была отфильтрована для отображения: none; в css.

Есть ли способ, с помощью которого я могу передать световой ящик через jQuery, чтобы игнорировать элементы, которые были скрыты с отображением: none ;? Это кажется достаточно простым, но мои знания за пределами html и css пока весьма ограничены.

PS: Я искал несколько мест, и я нашел код, который будет работать, но он удаляет (li) со страницы, и вам нужно будет обновить страницу, чтобы она отображалась снова. Это не то, что я хочу, так как у меня есть кнопка "показать все" для этой цели.