Конфликт slickslider и fancybox

Тема в разделе "JavaScript", создана пользователем Iga, 10 янв 2020.

  1. Iga

    Iga

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

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

    пациент
     
  2. Absolute

    Absolute Крокодил ;)

    Регистр.:
    9 авг 2009
    Сообщения:
    549
    Симпатии:
    412
    Попробуйте передать в 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 нравится это.
  3. Iga

    Iga

    Регистр.:
    12 янв 2014
    Сообщения:
    407
    Симпатии:
    69
    Да, оно. Почему-то я не обращал внимания на эту настройку.

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

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

    Но backfocus как временное решение в принципе сойдёт пока.
     
    Последнее редактирование: 11 янв 2020
  4. Absolute

    Absolute Крокодил ;)

    Регистр.:
    9 авг 2009
    Сообщения:
    549
    Симпатии:
    412
    Так будет листать:
    Код:
        $("[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 нравится это.
  5. Iga

    Iga

    Регистр.:
    12 янв 2014
    Сообщения:
    407
    Симпатии:
    69
    А чё тут происходит в afterShow? Я в кодинге не силён, но логику знать люблю :)
     
  6. Absolute

    Absolute Крокодил ;)

    Регистр.:
    9 авг 2009
    Сообщения:
    549
    Симпатии:
    412
    Небольшая ремарка - это:
    Код:
    $(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.
            }
        });
     
    Последнее редактирование: 13 янв 2020
    borodatych и Iga нравится это.