1

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

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

$('.gallery-link').fancybox({
    padding: 0,
    helpers : {
        overlay : {
            locked : false

        }
    },
    afterLoad: function(){
        showGallery();
    },
    afterClose: function(){
        destroyGallery();
    }
});

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

 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
    });
    }
}

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

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

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

3 ответа 3

2

Попробуйте воспользоваться функцией reloadSlider после прогрузки окна. afterShow: function(){ gallerySlider.reloadSlider({ ... ); }

1
  • Спасибо. Уже сам додумался. См. комментарий под вопросом.
    – rebroff
    23 ноя 2014 в 17:48
1

Предыдущий комментарий верен. Я лишь немного дополню. В момент инициализации слайдера контейнер и элементы слайдера должны быть видимыми, чтобы скрипт мог вычислить размеры. При расположении слайдера в окне Fancybox видимым он становится в тот момент, когда Fancybox показывает нам окно, поэтому после показа окна (по коллбэку afterShow) нам нужно либо запустить инициализацию слайдера:

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);
    }
});

либо перегрузить его, если он был инициализирован ранее:

gallerySlider.reloadSlider();
1

Решил. Добавил в обработчик afterShow() fancybox вызов gallerySlider.reloadSlider();

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.