Изотоп Фильтры только для отображения Отфильтрованный свет Галерея изображений

Question

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

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

Пожалуйста, помогите мне.

Мои Codepen

//isotope Code 
$('#gallery').isotope({ 
    // options 
    itemSelector: '.revGallery-anchor', 
    layoutmode: 'fitrows' 
}); 
$('button').on('click', function() { 
    var filterValue = $(this).attr('data-filter'); 
$('#gallery').isotope({ filter: filterValue }); 
}); 

Answer 1

Если создать замыкание при инициализации lightGallery, вы можете использовать API для уничтожения текущего экземпляра и повторно инициализировать при нажатии кнопки изотопного фильтра.

Создать замыкание и инициализировать lightGallery

$gallery = $('#gallery'); 

$gallery.lightGallery({...}); 

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

$gallery.data('lightGallery').destroy(true); 

$gallery.lightGallery({ 
    selector: filterValue.replace('*',''); 
}); 

http://codepen.io/mcoker/pen/KaWKvE