kepkame,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.product-gallery {
position: relative;
width: 300px;
}
.product-gallery__item {
position: relative;
width: 220px;
height: 220px;
object-fit: cover;
padding: 0;
}
.product-gallery__item a {
position: relative;
display: block;
cursor: grab;
}
.product-gallery__item img {
width: 220px;
height: 220px;
object-fit: cover;
}
.gallery-thambnails.slick-slider {
display: block;
padding-left: 0;
}
/* Thambnails */
.gallery-thambnails .slick-track {
margin-right: 1px;
margin-left: 1px;
}
/* Highlight thambnails */
.gallery-thambnails .slick-current img {
border: 1px solid brown;
}
.gallery-thambnails img {
width: 40px;
height: 40px;
}
/* Button zoom-in */
.gallery-thambnails__trigger {
position: absolute;
top: 10px;
right: 50px;
width: 40px;
height: 40px;
background-color: #ffffff;
border: 3px solid #ff0000;
border-radius: 50%;
cursor: zoom-in;
}
</style>
<script
type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick-theme.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>
<script>
jQuery(function() {
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,
afterClose: function() {
}
},
jQuery("#wcOpenFullPhoto").data("order") // Start gallery from selected index
);
});
});
</script>
</head>
<body>
<div class="product-gallery">
<!-- Big images -->
<figure id="wcGallaryWrapper" class="product-gallery__wrapper">
<div class="product-gallery__item slick-current">
<a href="https://twees.ru/demo/1.jpg" data-fancybox="gallery">
<img class="wp-post-image" width="560" height="510" src="https://twees.ru/demo/1.jpg" alt="img-01">
</a>
</div>
<div class="product-gallery__item">
<a href="https://twees.ru/demo/2.jpg" data-fancybox="gallery">
<img class="wp-post-image" width="560" height="510" src="https://twees.ru/demo/2.jpg" alt="img-02">
</a>
</div>
<div class="product-gallery__item">
<a href="https://twees.ru/demo/3.jpg" data-fancybox="gallery">
<img class="wp-post-image" width="560" height="510" src="https://twees.ru/demo/3.jpg" alt="img-03">
</a>
</div>
<div class="product-gallery__item">
<a href="https://twees.ru/demo/4.jpg" data-fancybox="gallery">
<img class="wp-post-image" width="560" height="510" src="https://twees.ru/demo/4.jpg" alt="img-04">
</a>
</div>
<div class="product-gallery__item">
<a href="https://twees.ru/demo/5.jpg" data-fancybox="gallery">
<img class="wp-post-image" width="560" height="510" src="https://twees.ru/demo/5.jpg" alt="img-05">
</a>
</div>
</figure>
<!-- Thambnails -->
<ol class="gallery-thambnails">
<li class="gallery-thambnails__item slick-current">
<img src="https://twees.ru/demo/1.jpg" width="100" height="100" alt="img-1">
</li>
<li class="gallery-thambnails__item">
<img src="https://twees.ru/demo/2.jpg" width="100" height="100" alt="img-2">
</li>
<li class="gallery-thambnails__item">
<img src="https://twees.ru/demo/3.jpg" width="100" height="100" alt="img-3">
</li>
<li class="gallery-thambnails__item">
<img src="https://twees.ru/demo/4.jpg" width="100" height="100" alt="img-4">
</li>
<li class="gallery-thambnails__item">
<img src="https://twees.ru/demo/5.jpg" width="100" height="100" alt="img-5">
</li>
</ol>
<!-- Button zoom-in -->
<a id="wcOpenFullPhoto" class="gallery-thambnails__trigger" href="" data-fancybox="gallery" data-order="0" title="Zoom-in"></a>
</div>
</body>
</html>