I am currently working on a portfolio for an artist. I am using Masonry with Isotope to filter for specific kinds of paintigs. When the items are being clicked, it opens lightGallery: http://sachinchoolur.github.io/lightGallery/
Everything works fine so far, the problem is the following:
What I want to achieve is that, if you filter for nature paintings for example, only the nature paintings will be shown and if you click on one of the items it opens the gallery. But the problem is, that at the moment ALL images of ALL categories are been shown in the gallery of nature. So if you click through them, you also get images of the category 'people' for example.
I guess the aim there is to give the different categories different 'galleries'. But if the filter 'show all' is clicked, the user should also be able to click through all the images of all categories, so that the gallery is not ending when the category of the item being clicked 'ends'.
As Im not that good with javascript, I hope you may be able to help me a little bit and that you understand my problem ..
The Code HTML MARKUP
<div class="categories">
<button data-filter="*">Alle</button>
<button data-filter=".ship">Schiff</button>
<button data-filter=".copop">CoPop</button>
<button data-filter=".grey_bg">grey bg</button>
</div>
<div class="grid" id="lightgallery">
<a class="grid__item copop" href="app/assets/img/co-pop.jpg">
<img class="grid__item__img" src="app/assets/img/co-pop.jpg">
</a>
<a class="grid__item ship" href="app/assets/img/ship.jpg">
<img class="grid__item__img" src="app/assets/img/ship.jpg">
</a>
<a class="grid__item copop" href="app/assets/img/co-pop.jpg">
<img class="grid__item__img" src="app/assets/img/co-pop.jpg">
</a>
<a class="grid__item ship" href="app/assets/img/ship.jpg">
<img class="grid__item__img" src="app/assets/img/ship.jpg">
</a>
<a class="grid__item copop" href="app/assets/img/co-pop.jpg">
<img class="grid__item__img" src="app/assets/img/co-pop.jpg">
</a>
<a class="grid__item ship" href="app/assets/img/ship.jpg">
<img class="grid__item__img" src="app/assets/img/ship.jpg">
</a>
</div>
</div>
JS initialize lightgallery
<script type="text/javascript">
$(document).ready(function() {
$("#lightgallery").lightGallery();
});
</script>
JS isotope
(function($) {
$('#wrap').imagesLoaded(function() {
$('.categories').on( 'click', 'button', function() {
var filterValue = $(this).attr('data-filter');
$grid.isotope({ filter: filterValue });
});
var $grid = $('.grid').isotope({
itemSelector: '.grid__item',
percentPosition: true,
masonry: {
columnWidth: '.grid__item'
}
})
});
So I guess I need to create several galleries and say in the code that only the items of that activated data-filter gallery will be shown when clicked. But maybe that would also work without creating extra multiple galleries? Because then the problem would maybe be, that when all items are active, only the ones in that specific gallery of the selected item will be shown in the lightGallery.
Thank you for your help in advance!
