JSFiddle - React, Tailwind, and code Playground

by kepkame

HTML

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/slick/slick-theme.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/[email protected]/dist/jquery.fancybox.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>
<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...

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

JavaScript

// Fancybox script is on line 52

// Slick slider
jQuery(".product-gallery__wrapper").slick({
  slidesToShow: 1,
  slidesToScroll: 1,
  infinite: false,
  centerMode: false,
  focusOnSelect: true,
  asNavFor: '.gallery-thambnails',
});

// Slick slider - Opening full screen photo
let btnOpenFullPhoto = document.querySelector("#wcOpenFullPhoto");
let currentBigImageHref = document.querySelector("#wcGallaryWrapper .product-gallery__item.slick-current a").getAttribute('href');
btnOpenFullPhoto.href = currentBigImageHref;

// 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");

  // Open the photo to full screen
  let btnOpenFullPhoto = document.querySelector("#wcOpenFullPhoto");
  let currentBigImageHref = document.querySelector("#wcGallaryWrapper .slick-current .product-gallery__item a").getAttribute('href');
  btnOpenFullPhoto.href = currentBigImageHref;
  jQuery("#wcOpenFullPhoto").attr("data-order", jQuery("#wcGallaryWrapper .slick-current .product-gallery__item a").data("order"));
  var wcOperFullPhotoData = jQuery("#wcOpenFullPhoto").attr("data-order", jQuery("#wcGallaryWrapper .slick-current .product-gallery__item a").data("order"));
});

jQuery(".gallery-thambnails").slick({
  slidesToShow: 4,
  slidesToScroll: 1,
  infinite: false,
  dots: false,
  centerMode: false,
  focusOnSelect: true,
  asNavFor: '.product-gallery__wrapper'
});

// Sorting references to product images
jQuery(".product-gallery__item a").each(function(index) {
  index += 1;
  jQuery(this).attr('data-order', index);
});



// FANCYBOX
// Sort array of objects by property
let sortObjectsBy = function(field, reverse, primer) {
  let key = primer ?...