Есть две magnific popup попап-галереи.
Первая инициализируется так:
$('.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();
}
}
});
});
Вторая так (инициализация с фоторамой):
var api = $('.fotorama').fotorama({
nav: 'thumbs',
thumbwidth: 100,
thumbheight: 75,
thumbmargin: 13,
click: false,
swipe: false
}).data('fotorama');
function getImagesToDisplay(fotorama) {
var result = Array();
for (var i=0; i<fotorama.data.length; i++) {
result.push({
src: fotorama.data[i].display
})
}
return result;
}
$('.inner-gallery .fotorama__stage').magnificPopup({
type: 'image',
image: {
markup: '<div class="mfp-figure"><div class="mfp-close"></div><div class="mfp-img"></div></div>',
cursor: null,
tClose: 'Закрыть',
titleSrc: function (item) {
return api.activeFrame.title;
}
},
items: getImagesToDisplay(api),
gallery: {
enabled: true,
preload: [0,2],
navigateByImgClick: true,
tPrev: 'Предыдущее фото',
tNext: 'Следующее фото'
},
callbacks: {
buildControls: function() {
if (api.data.length > 1) {
this.contentContainer.append(this.arrowLeft.add(this.arrowRight));
this.arrowLeft.addClass('fd');
this.arrowRight.addClass('fd');
}
},
open: function(){
var item = this.currItem;
$('button.mfp-close').text('');
var mfp = this;
var proto = $.magnificPopup.proto;
mfp.next = function() {
proto.next.call(mfp);
if(api.index == api.size - 1){
api.show('<<');
api.index = 0;
}
else{
api.show('>');
api.index = api.index + 1;
}
//$('.fotorama__stage .fotorama__active').click();
};
mfp.prev = function() {
proto.prev.call(mfp);
if(api.index == 0){
api.show('>>');
api.index = api.size - 1;
}
else{
api.show('<');
api.index = api.index - 1;
}
//$('.fotorama__stage .fotorama__active').click();
};
}
},
});
Однако после инициализации второй, вот эти две функции - т.е. паралельное переключение картинок попап-галереи и слайдов фоторамы - начинает срабатывать при переключении также и ПЕРВОЙ попап-галереи. Т.е. эти две фукнции начинают срабатывать глобально.
mfp.next = function() {
proto.next.call(mfp);
if(api.index == api.size - 1){
api.show('<<');
api.index = 0;
}
else{
api.show('>');
api.index = api.index + 1;
}
};
mfp.prev = function() {
proto.prev.call(mfp);
if(api.index == 0){
api.show('>>');
api.index = api.size - 1;
}
else{
api.show('<');
api.index = api.index - 1;
}
};
Я проверил: этого нет ни с buildControls, ни с open (вставлял alert-ы, и они выходили у первой только при переключении слайдов)
За счет чего это происходит?
Эта часть кода на основе записи в
FAQ
Помогло задание этих двух функций первой галерее, тогда она не берет их у второй.
Но это все равно не дает ответ на причину.