Почему одна галерея вклинивается в другую?

Question

[GreenMan1899]

Используется magnific popup. Если на странице открыть галерею вариантов отделок, то все ок. Но если сначала открыть и полистать галерею товара, а потом вариантов отделок, то при переключении почему-то вклиниваются картинки из галереи товара и переключение картинок галереи идет только среди них.

Сайт

вот инициализация галереи товара:

var api = $('.fotorama').fotorama({
    nav: 'thumbs',
    thumbwidth: 50,
    thumbheight: 50,
    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').on('click', '.fotorama__stage .fotorama__active , .noob-fix', function (event) {
    event.preventDefault();
    $.magnificPopup.open({
        type: 'image',
        closeBtnInside:true,
        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: function (item) {
                return api.activeFrame.title;
            }
        },
        items: getImagesToDisplay(api),
        gallery: {
            enabled: true,
            preload: [0,2],
            navigateByImgClick: true,
        },
        callbacks: {
            buildControls: function() {
                if (this.items.length > 1) {
                    this.contentContainer.append(this.arrowLeft.add(this.arrowRight));
                }
            },
            open: function () {
                var item = this.currItem;
                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;
                    }
                    else{
                        api.show('<');
                        api.index = api.index - 1;
                    }
                    $('.fotorama__stage .fotorama__active').click();
                };
            },
        },
    }, api.activeIndex)
    api.index = api.activeIndex;
});

а вот инициализация вариантов отделок:

$('.gallery-samples').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-img-link',
        callbacks: {
            buildControls: function() {
                if (this.items.length > 1) {
                    this.contentContainer.append(this.arrowLeft.add(this.arrowRight));
                }
            },
            beforeOpen: function () {
                var width = $('body').width(),
                    height = $('html').height();
                $('#overlay').css({
                    width: width,
                    height: height
                }).show();
            },
            open: function (item) {
                var width = window.innerWidth,
                    height = window.innerHeight;
                $('.mfp-container').css({
                    width: width,
                    height: height
                });
            },
            change: function(item) {
                if ( window.screen.width < 481 ) {
                    $(item.img).width( $(document).width() - 150 );
                }
            },
            afterClose: function () {
                $('#overlay').hide();
            }
        }
    });
});

Answer 1

[GreenMan1899]

установил, что дело в этой части кода:
$('.fotorama__stage .fotorama__active').click();