How to reset index value in $.fancybox.open in Fancybox 3?

Question

JavaScript

Hello!

Connected slider Slick with images.
Fancybox opens images on button click, not the image itself.

Each link with an image has a data-order numbered from 1 to 5.
When scrolling the slider, the button is given the data-order value from the currently open image of the slider and is set by the index in $fancybox.open.
Thanks to this, when you click on the button, an image with the specified index opens in fancybox, which must be opened.

Everything works fine, the desired image opens, but when I close the fancybox, I scroll to another image in the slider, press the button and the image from the previous index opens for me.

Fancybox has a setting for triggering an event after the slider is closed - afterClose, but I can’t find information anywhere on how to reset or update the value of index.

I would be grateful for any ideas!

All slider code uploaded to Jsfiddle .
Below is part of the code that calls 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

Got an answer on another forum. The afterClose setting was not needed, I dug in the wrong direction at all.

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