Стоп Lightbox2 галерея на {display: none;} images

Question

Я в настоящее время пользуюсь Lightbox2 от Lokesh Dakhar, чтобы отобразить галерею изображений продуктов на веб-сайте онлайн-каталога.

Пример:

[Yellow Banana] [Red Apple] [Yellow Lemon]  ← Image Gallary 

Я также с помощью фильтра поиска на сторону клиента (сузить результаты конкретной информации), которая скрывает изображения продукта путем присоединения правила CSS display: none, если входные данные не соответствуют названию продукта.

Пример:

Search: Yellow 

Результат:

[Yellow Banana] [Yellow Lemon] 

Мои Проблема в том, что Gallary Lightbox2 все еще показывает в этих двух продуктов на «следующее изображение Lightbox-х годах [Red Apple] ».

Есть ли способ приложить заявление if к сценарию Лайтбокс, заставляя его игнорировать продукты с display: none, которые в настоящее время прикреплены к ним?

Воспроизводится Проблема в: JSFiddle с документацией.

Answer 1

Ниже представлена ​​версия вашего обработчика событий input, который сделает трюк.

document.getElementById("search").addEventListener("input", function() { 
    var filter = this.value, 
    pictures = $(".searchable"); 

    pictures.each(function() { 
    if (this.dataset.index.toLowerCase().indexOf(filter.toLowerCase()) !== -1) { 
     $(this).show().find("a").attr("data-lightbox", "roadtrip"); 
    } else { 
     $(this).hide().find("a").attr("data-lightbox", "ignore"); 
    } 
    }); 
}); 

Этот код использует jQuery для скрытия/отображения фильтрованных элементов, а не для установки тега стиля на странице.

Лайтбоксы обрабатывает изображения как группу, когда у них тот же самый атрибут data-lightbox. Чтобы исключить изображение из группы, просто измените этот атрибут (игнорировать, в моем примере).