Конфликт slickslider и fancybox

Iga

Гуру форума
Регистрация
12 Янв 2014
Сообщения
425
Реакции
83
Баг небольшой, но довольно неприятный, не получается никак победить.
Есть карусель на slickslider, при клике на фотку, открывается галерея fancybox.
В slickslider 3 слайда, центральный видимый, боковые забелены. Если листать slickslider, то центральный всегда "активный". Но если тыкнуть в слайд, пролистать фотки в fancybox и после этого закрыть модальное окно, то центральный слайд в slickslider будет тоже забелённым.

Как научить их общаться и делать центральный слайд slickslider активным после использования fancybox?

Для просмотра ссылки Войди или Зарегистрируйся
 
Как научить их общаться и делать центральный слайд slickslider активным после использования fancybox?
Попробуйте передать в fancy backFocus : false - здесь: /wp-content/themes/gutver/js/common.js?ver=5.2.5
Заменить это:
Код:
/**** fancybox *****/
$(document).ready(function() {
  $("[data-fancybox]").fancybox({
    infobar: true,
    arrows: true,
  });
});
на это:
Код:
/**** fancybox *****/
$(document).ready(function() {
  $("[data-fancybox]").fancybox({
    infobar: true,
    arrows: true,
    backFocus : false
  });
});
 
  • Нравится
Реакции: Iga
Да, оно. Почему-то я не обращал внимания на эту настройку.

Но тока в таком варианте оно не листает вместе с галереей, а остаётся на слайде входа в fancybox. Но уже лучше.

По сути, если без backfocus, то надо сделать, чтобы центральный слайд был всегда .active

Но backfocus как временное решение в принципе сойдёт пока.
 
Последнее редактирование:
Но тока в таком варианте оно не листает вместе с галереей, а остаётся на слайде входа в fancybox. Но уже лучше.
Так будет листать:
Код:
    $("[data-fancybox]").fancybox({
        infobar: true,
        arrows: true,
        backFocus: false,
        afterShow : function(a, item){
          var index = $(item.opts.$orig[0]).parent().data('slick-index');
          index = index ? ~~index : 0;
          $('.sld-img-product').slick('slickGoTo', index, !0);
        }
    });
 
  • Нравится
Реакции: Iga
А чё тут происходит в afterShow? Я в кодинге не силён, но логику знать люблю :)
 
А чё тут происходит в afterShow? Я в кодинге не силён, но логику знать люблю :)
Небольшая ремарка - это:
Код:
$(item.opts.$orig[0]).parent().data('slick-index');
Должно быть, несколько правильнее записать так:
Код:
item.opts.$orig.parent().data('slick-index');
Потому что item.opts.$orig - итак объект jQuery судя по всему. Просто я давно уже с fancy не работал, прошу прощения за неточности.
Остально расписал быстро на коленке:
Код:
$("[data-fancybox]").fancybox({
        infobar: true,
        arrows: true,
        backFocus: false,
        afterShow : function(a, item){    // всякий раз после вывода изображения в модал Fancy - запускается эта функция

           var index = item.opts.$orig.parent().data('slick-index');    // item.opts.$orig - ссылка на текущий элемент с кот., работает fancybox,
           // .parent() - переходим к родителю, .data('slick-index') - получаем значение индекса текущего слайда
          
           index = index ? ~~index : 0;  // эта строка - на всякий случай, если в index нам вернулось, нечто стрёмное - например undefined или null, + эта строка
           // меняет тип string на number т.к. в документации Slick Slider аргументы метода slickGoTo:: int : slide number, boolean: dont animate
           // привести к нужному типу - это всегда лучше сделать, чем не сделать, даже не смотря на то, что сейчас прилетает нужный тип данных
           // здесь тернарный оператор ?: (см Google) + дважды побитовая инверсия ~~ (можно использовать и parseFloat),
           // но так работает быстрее + округляет, если вдруг словили дробь (всякое в жизни бывает :)) - не забываем, что slickGoTo ждет int
          
           $('.sld-img-product').slick('slickGoTo', index, !0);    // это ключевой момент, используем предустановленный метод Slick Slider - первым аргументом,
            //  вторым аргументом отправляем номер текущего слайда, с кот. работает Fancy, третий аргумент - !0 - это true, просто на 2 символа короче, инверсия (!) возвращает boolean
            // false в третьем аргументе  вроде как должен дать анимацию на заднем плане при листании Fancy - будет выполняться анимация при сопутствующем переключении в Slick Slider.
        }
    });
 
Последнее редактирование:
Назад
Сверху