Isotope Filters to only display Filtered Light Gallery images

Question

I wanted to create a filtering portfolio for my website, I've got everything setup but the thing is, When I use Isotope to filter a category, of course it filters out but when I click on the image and fire up lightgallery, it shows all the images from all categories.

I want the images of a particular category to be visible in the slideshow of lightgallery. I saw some answer in stack, I guess I need to implement a shadowbox. but don't know how.

Please help me.

My 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

If you create a closure when you initialize lightGallery, you can use the API to destroy the current instance and re-initialize when you click the isotope filter buttons.

Create a closure and initialize lightGallery

$gallery = $('#gallery'); 

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

And when you click on the isotope filter button, destroy that instance and re-initialize based on the class of the elements you want to be in the gallery. That class is filterValue here

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

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

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