@kotey

Как разделить Magnific popup галерею по фильтрам?

Доброго времени суток, уважаемые!
Суть вопроса.
Имеется галерея на 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 самой галереи и потому, когда выбрана опция "Все фото", изображения отображаются по прежнему группами, а не все.
  • Вопрос задан
  • 670 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы