Всем привет!
Подключил слайдер 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 // запустить галерею из выбранного индекса
);
});