Как инициализировать bxslider во вплывающем окне?

Question

[Владимир Ребров]

Здравствуйте. Вопрос в следующем.

По клику на ссылку вызываю всплывающее окно (fancybox), внутрь которого загружаю другим скриптом (bxslider) галерею фото. Окно показываю так:

$('.gallery-link').fancybox({
    padding: 0,
    helpers : {
        overlay : {
            locked : false
        }
    },
    afterLoad: function(){
        showGallery();
    },
    afterClose: function(){
        destroyGallery();
    }
});

showGallery - это функция, которой я, используя bxslider, формирую нужную мне галерею в окне fancybox, код ниже:

function showGallery(){

if ($('.gallery-thumbs-list').length > 0) {

    var thumb = $('.gallery-thumbs-list').find('.thumb');

    var visibleThumbs = 6;

    //Слайдер больших фото
    gallerySlider = $('.gallery-images').bxSlider({
        controls: true,
        pager: false,
        easing: 'easeInOutQuint',
        infiniteLoop: true,
        speed: 500,
        mode: 'fade',
        minSlides: 1,
        maxSlides: 1,
        slideWidth: 700,
        onAfterSlide: function (currentSlideNumber) {
            thumb.removeClass('pager-active');
            thumb.eq(currentSlideNumber).addClass('pager-active');
        },
        onNextSlide: function (currentSlideNumber) {
            slideThumbs(currentSlideNumber, visibleThumbs);
        },
        onPrevSlide: function (currentSlideNumber) {
            slideThumbs(currentSlideNumber, visibleThumbs);
        }
    });

    thumb.click(function (e) {

        gallerySlider.goToSlide($(this).closest('.thumb-item').index() - 6);

        e.preventDefault();
    });

    function slideThumbs(currentSlideNumber, visibleThumbs) {

        var m = Math.floor(currentSlideNumber / visibleThumbs);
        var slideTo = m * visibleThumbs;

        thumbsSlider.goToSlide(slideTo);
    }

    $('.gallery-thumbs-list').find('.thumb').click(function () {

        $('.gallery-thumbs-list').find('.thumb').removeClass('pager-active');
        $(this).addClass('pager-active');

    });

    //Слайдер миниатюр для навигации
    thumbsSlider = $('.gallery-thumbs-list').bxSlider({
        controls: false,
        pager: false,
        easing: 'easeInOutQuint',
        displaySlideQty: visibleThumbs,
        moveSlideQty: visibleThumbs,
        minSlides: 1,
        maxSlides: 8,
        slideWidth: 73,
        slideMargin: 20
    });
}
}

Все ок, за исключением одного: всплывающее окно появляется пустым. Контролы слайдера на месте, но фоток нет. Но, если в этот момент попробовать ресайзить окно браузера, то вуаля! фотки загружаются, все работает как нужно.

Подскажите, пожалуйста, в чем может быть проблема.

Заранее благодарю за помощь.

Answer 1

[Александр Миранович]

Или подключай слайдер при открытии окна, или делай Reload slider bxslider.com/examples/reload-slider опять же при открытие окна

Comments

[Владимир Ребров]

Пробовал в afterLoad: function() вставлять gallerySlider.reloadSlider(); - результат тот же.

[Владимир Ребров]

Причем, если в консоли потом вбиваю gallerySlider.reloadSlider(); - обновляется.

[Александр Миранович]

тебе надо обновлять слайдер, когда происходит клик по элементу, который открывает всплывающие окно. потому что так у блока стоит display: none; и bx-slider не правильно вычисляет размеры. поэтому когда окно получает display: block; тогда и надо ставить gallerySlider.reloadSlider()

[Владимир Ребров]

Александр Миранович: благодарю. Запихнул релоуд в afterShow - работает.