@GreenMan1899

Почему функция срабатывает глобально?

Есть две 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

Помогло задание этих двух функций первой галерее, тогда она не берет их у второй.
Но это все равно не дает ответ на причину.
  • Вопрос задан
  • 203 просмотра
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
17 мая 2024, в 22:37
20000 руб./за проект
17 мая 2024, в 22:33
1000 руб./за проект
17 мая 2024, в 22:30
5000 руб./за проект