В magnific popup для задания
множественных галерей предлагается использование each().
Но у меня почему-то все равно элементы
.sample
идут в одну галерею.
Вот код отдельных галерей:
<div class="tab-contents">
<div class="tab-content" data-tab="0">
<a class="sample" href="/media/upload/attachment/cache/upload/attachment/source/20-samples.jpg" data-title="Винилискожа Серая">
<img src="/media/upload/attachment/cache/upload/attachment/source/20-samples.jpg" alt="Винилискожа Серая">
</a>
<a class="sample" href="/media/upload/attachment/cache/upload/attachment/source/1-7e0d-samples.jpg" data-title="Винилискожа Белая">
<img src="/media/upload/attachment/cache/upload/attachment/source/1-7e0d-samples.jpg" alt="Винилискожа Белая">
</a>
<a class="sample" href="/media/upload/attachment/cache/upload/attachment/source/2-746e-samples.jpg" data-title="Винилискожа Темный бордо">
<img src="/media/upload/attachment/cache/upload/attachment/source/2-746e-samples.jpg" alt="Винилискожа Темный бордо">
</a>
</div>
<div class="tab-content" data-tab="1">
<a class="sample" href="/media/upload/attachment/cache/upload/attachment/source/g1-samples.jpg" data-title="Узор из пуговиц № 1">
<img src="/media/upload/attachment/cache/upload/attachment/source/g1-samples.jpg" alt="Узор из пуговиц № 1">
</a>
<a class="sample" href="/media/upload/attachment/cache/upload/attachment/source/g3-samples.jpg" data-title="Узор из пуговиц № 2">
<img src="/media/upload/attachment/cache/upload/attachment/source/g3-samples.jpg" alt="Узор из пуговиц № 2">
</a>
</div>
</div>
А вот код их инициализации
$( function(){
$('.tab-content').each(function(){
$(this).magnificPopup({
type: 'image',
image: {
markup: '<div class="mfp-figure">'+
'<div class="mfp-close"></div>'+
'<div class="mfp-img"></div>'+
'<div class="mfp-bottom-bar">'+
'<div class="mfp-title"></div>'+
'</div>'+
'</div>',
cursor: null,
tClose: 'Закрыть',
titleSrc: 'data-title'
},
gallery: {
enabled: true,
preload: [0,2],
navigateByImgClick: true,
tPrev: 'Предыдущее фото',
tNext: 'Следующее фото'
},
delegate: '.sample',
callbacks: {
beforeOpen: function () {
var width = $('body').width(),
height = $('html').height();
$('#overlay').css({
width: width,
height: height
}).show();
},
open: function () {
var width = window.innerWidth,
height = window.innerHeight;
$('.mfp-container').css({
width: width,
height: height
});
$('button.mfp-close').text('');
},
buildControls: function() {
if (this.items.length > 1) {
this.contentContainer.append(this.arrowLeft.add(this.arrowRight));
}
},
afterClose: function () {
$('#overlay').hide();
}
}
});
});
});