на большую картинку вешаете такой код (тут немного лишнего)
var isMobileDevice = $('body').hasClass('mobile');
$(document).on('click', '.one-sensor__big-img, function (e) {
e.preventDefault();
var $links = sliderBig.data('json');
var index = $(this).data('fancybox-index');
$.fancybox.open($links.image, {
baseClass: "js-gallery-big-fancybox fancybox-horizontal-thumbs",
arrows: true,
toolbar: true,
loop: true,
thumbs: {
autoStart: false,
axis: isMobileDevice ? 'x' : 'y'
},
buttons: [
"slideShow",
"fullScreen",
"thumbs",
"close"
]
}, index);
});
и json на большую (не помню, возможно "index" в json не нужен)
{
"image": [
{
"src": "orig/booking18059_1.jpg",
"opts": {
"thumb": "/orig/small/booking18059_1.jpg",
"index": "0"
}
},
{
"src": "/orig/booking18059_10.jpg",
"opts": {
"thumb": "/orig/small/booking18059_10.jpg",
"index": "1"
}
},
{
"src": "/orig/booking18059_11.jpg",
"opts": {
"thumb": "/orig/small/booking18059_11.jpg",
"index": "2"
}
},
{
"src": "/orig/booking18059_13.jpg",
"opts": {
"thumb": "/orig/small/booking18059_13.jpg",
"index": "3"
}
},
{
"src": "/orig/booking18059_14.jpg",
"opts": {
"thumb": "/orig/small/booking18059_14.jpg",
"index": "4"
}
}
]
}
потом миниатюрам тоже проставляете индекс и меняете при клике у большой.
