Как в Fancybox 3 сбросить значение index в $.fancybox.open?

126
10 декабря 2021, 21:50

Всем привет!

Подключил слайдер Slick с изображениями. Fancybox открывает изображения при нажатии на кнопку, а не на само изображение.

У каждой ссылки с изображением прописан data-order с нумерацией от 1 до 5.

При перелистывании слайдера, кнопке передаётся значение data-order от текущего открытого изображения слайдера и задаётся индексом в $fancybox.open. Благодаря этому, при нажатии на кнопку, в fancybox открывается изображение с указанным index, которое необходимо открыть.

Всё отлично срабатывает, открывается нужное изображение, но при закрытии fancybox, листаю в слайдере до другого изображения, нажимаю на кнопку и мне открывается изображение из предыдущего индекса.

В fancybox есть настройка срабатывания события после закрытия слайдера – afterClose, но нигде не могу найти информацию, как сбросить или обновить значение index.

Буду благодарен за любые идеи!

Весь код со слайдером загрузил на Jsfiddle
Ниже часть кода вызывающая fancybox.

    // сортировка массива объектов по свойству
    let sortObjectsBy = function(field, reverse, primer) {
      let key = primer ? function(x) {
        return primer(x[field])
      } : function(x) {
        return x[field]
      };
      reverse = !reverse ? 1 : -1;
      return function(a, b) {
        return a = key(a),
          b = key(b),
          reverse * ((a > b) - (b > a));
      }
    }

    jQuery('#wcOpenFullPhoto').on('click', function(e) {
      var fancyElements = [];
      e.preventDefault();
      // создание массива объектов fancybox
      jQuery('.product-gallery__item a').each(function(index) {
        var el = jQuery(this).get(0),
          order = jQuery(this).data("order");
        fancyElements.push({
          src: el.href,
          caption: el.title,
          order: order
        });
      });
      // сортировка массива объектов fancybox по свойству "order"
      fancyElements.sort(sortObjectsBy("order", false, function(a) {
        return a;
      }));
      // запуск fancybox программно
      jQuery.fancybox.open(
        fancyElements, {
          // пользовательские опции
          loop: false,
          afterClose: function() {
          }
        },
        jQuery("#wcOpenFullPhoto").data("order") - 1 // запустить галерею из выбранного индекса
      );
    });
Answer 1

Получил ответ на другом форуме. Настройка afterClose не понадобилась, я совсем не в ту сторону копал.

var fancyElements = jQuery.map(jQuery('.product-gallery__item a'), function(el) {
      return{
      src: el.href,
      caption: el.title
     }
    });
jQuery(".product-gallery__wrapper").slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  infinite: false,
  centerMode: false,
  focusOnSelect: true,
  asNavFor: '.gallery-thambnails'
});
// Highlight thumbnail if large image is the same
jQuery(".gallery-thambnails").on("afterChange", function(event, slick, currentSlide, nextSlide) {
  // remove all active class
  jQuery(".gallery-thambnails .slick-slide").removeClass("slick-current");
  // set active class for current slide
  jQuery(".gallery-thambnails .slick-slide:not(.slick-cloned)").eq(currentSlide).addClass("slick-current");
  jQuery("#wcOpenFullPhoto").data("order", currentSlide);
});
jQuery(".gallery-thambnails").slick({
  slidesToShow: 4,
  slidesToScroll: 1,
  infinite: false,
  dots: false,
  centerMode: false,
  focusOnSelect: true,
  asNavFor: '.product-gallery__wrapper'
});
jQuery('#wcOpenFullPhoto').on('click', function(e) {
  e.preventDefault();
  jQuery.fancybox.open(
    fancyElements, {
      // Custom options
      loop: false,
    },
    jQuery("#wcOpenFullPhoto").data("order")  // Start gallery from selected index
  );
});
READ ALSO
Почему не отправляется письмо?

Почему не отправляется письмо?

Подскажите, пожалуйста, где у меня ошибка? При попытке отправить письмо выдает "Произошла ошибка!" и письмо не отправляетсяБлагодарю за помощь!

190
Суммировать value при нажатии на кнопку

Суммировать value при нажатии на кнопку

Подскажите пожалуйста, кто разбирается

278
Javascript. Обнуление переменных в цикле

Javascript. Обнуление переменных в цикле

Есть код, который проходится по заказам и получает суммы за определенный периодСейчас 3 периода

77
Пустое значение в заявке

Пустое значение в заявке

Кто может подсказать в чем причина? Когда нажимаю кнопку отправить, полученное значение становится NaN

82