@GreenMan1899

Почему не работают множественные галереи magnific popup?

В 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();
                }
            }
        });
    });
});
  • Вопрос задан
  • 212 просмотров
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы