Доброго времени суток, уважаемые!
Суть вопроса.
Имеется галерея на masonry:
<div id="masonry" class="gallery">
<div class="item" data-filter="1">
<a href="img/gallery/1.jpg"><img src="img/gallery/1.jpg" alt="filter1"></a>
</div>
<div class="item" data-filter="2">
<a href="img/gallery/2.jpg"><img src="img/gallery/2.jpg" alt="filter2"></a>
</div>
<div class="item" data-filter="2">
<a href="img/gallery/3.jpg"><img src="img/gallery/3.jpg" alt="filter2"></a>
</div>
</div>
к ней прикручен блок, который отбирает изображения по атрибуту data-filter:
<div class="filters">
<div class="btn-group">
<button data-filter="" class="btn active">Все фото</button>
<button data-filter="1" class="btn">Люди</button>
<button data-filter="2" class="btn">Природа</button>
</div>
</div>
(что-то вроде
dynamick.github.io/multiple-filter-masonry только попроще, без мультивыбора)
Ну а при клике выводится popup окно через скрипт Magnific popup.
Проблема в том, чтобы выводить только отфильтрованные изображения.
То есть, если нажимаем "Люди" то должны отображаться лишь изображения с атрибутом data-filter="1".
Нашел решение вот тут:
codepen.io/dimsemenov/pen/pvvpgJ прикрутил
var groups = {};
$('.gallery .item').each(function() {
var id = parseInt($(this).attr('data-filter'), 10);
if((!groups[id])) {
groups[id] = [];
}
groups[id].push( this );
});
$.each(groups, function() {
$(this).magnificPopup({
mainClass: 'mfp-zoom-in',
delegate: 'a',
type: 'image',
tLoading: '',
gallery:{
enabled:true,
},
image: { // ALT картинки
tError: '<a href="%url%">The image</a> could not be loaded.',
titleSrc: function(item) {
return item.el.find('img').attr('alt') + '';
}
}
});
});
Скрипт прекрасно работает, но увы, не так, как хотелось бы. =( Да, он разбивает галерею на несколько (честь и хвала автору!), но данные-то берет непосредственно из атрибута в классе item самой галереи и потому, когда выбрана опция "Все фото", изображения отображаются по прежнему группами, а не все.