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

Question

[kepkame]

Всем привет!

Подключил слайдер 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

[kepkame]

Получил ответ на другом форуме. Настройка 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
  );
});