Quick view Solution

gistfile1.txt

// JS Code

// Libraries used to run slick carousel 
// 1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js
// 2. https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js

const link1 = document.createElement('link');
link1.rel = 'stylesheet';
link1.type = 'text/css';
link1.href = 'https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css';


const link2 = document.createElement('link');
link2.rel = 'stylesheet';
link2.type = 'text/css';
link2.href = '://cdn.jsdelivr.net/jquery.slick/1.6.0/slick-theme.css';

document.head.appendChild(link1);
document.head.appendChild(link2);

const productCards = document.querySelectorAll(".product-card");
const overlay = document.createElement("div");
overlay.classList.add("overlay");
document.body.appendChild(overlay);

overlay.addEventListener("click", () => {
  document.querySelector(".popup").classList.remove("show");
  overlay.style.display = "none";
});

productCards.forEach((productCard) => {
  const button = document.createElement("button");

  button.innerHTML = "Quick view";
  button.classList.add("btn-quick");
  button.addEventListener("click", function () {
    document.querySelector(".popup").classList.add("show");
    overlay.style.display = "block";
  });

  productCard.appendChild(button);
});

const popupContainer = document.createElement("div");
popupContainer.innerHTML = `
  <div class="popup">
  <div class="btn-close">❌</div>
  <ul class="slider-for">
    <li class="slide-item"><img data-lazy="https://cdn20.pamono.com/p/m/1/7/1734083_mtqju8i4ki/mid-century-mahogany-sideboard-with-brass-accents.png" alt="product-thumbnail"></li>
    <li class="slide-item"><img data-lazy="https://cdn20.pamono.com/p/m/1/6/1653610_3ji4ktudfu/baia-sectional-sofa-by-antonio-citterio-and-paolo-nava-1970s-set-of-5.png" alt="product-thumbnail"></li>
    <li class="slide-item"><img data-lazy="https://cdn20.pamono.com/p/m/1/7/1720569_llrsc7uo0w/gfm-64-highback-armchairs-in-boucle-attributed-to-edmund-homa-1960s-set-of-2.jpg" alt="product-thumbnail"></li>
    <li class="slide-item"><img data-lazy="https://cdn20.pamono.com/p/m/1/4/1482048_3uj4ayog4b/art-deco-bedroom-chairs-1930s-set-of-2.jpg" alt="product-thumbnail"></li>
    <li class="slide-item"><img data-lazy="https://cdn20.pamono.com/p/m/1/0/1069957_tbg3dtc5a5/frame-3-seater-sofa-with-armrest-by-stefano-giovannoni.jpg" alt="product-thumbnail"></li>
    <li class="slide-item"><img data-lazy="https://cdn20.pamono.com/p/m/1/0/1069914_wcjf0eh7wi/coast-table-by-branch-creative.jpg" alt="product-thumbnail"></li>
  </ul>
  <ul class="slider-nav">
    <li class="thumbnail-item"><img data-lazy="https://cdn20.pamono.com/p/m/1/7/1734083_mtqju8i4ki/mid-century-mahogany-sideboard-with-brass-accents.png" alt="product"></li>
    <li class="thumbnail-item"><img data-lazy="https://cdn20.pamono.com/p/m/1/6/1653610_3ji4ktudfu/baia-sectional-sofa-by-antonio-citterio-and-paolo-nava-1970s-set-of-5.png" alt="product"></li>
    <li class="thumbnail-item"><img data-lazy="https://cdn20.pamono.com/p/m/1/7/1720569_llrsc7uo0w/gfm-64-highback-armchairs-in-boucle-attributed-to-edmund-homa-1960s-set-of-2.jpg" alt="product"></li>
    <li class="thumbnail-item"><img data-lazy="https://cdn20.pamono.com/p/m/1/4/1482048_3uj4ayog4b/art-deco-bedroom-chairs-1930s-set-of-2.jpg" alt="product"></li>
    <li class="thumbnail-item"><img data-lazy="https://cdn20.pamono.com/p/m/1/0/1069957_tbg3dtc5a5/frame-3-seater-sofa-with-armrest-by-stefano-giovannoni.jpg" alt="product"></li>
    <li class="thumbnail-item"><img data-lazy="https://cdn20.pamono.com/p/m/1/0/1069914_wcjf0eh7wi/coast-table-by-branch-creative.jpg" alt="product"></li>
  </ul>
</div>
`;

document.body.appendChild(popupContainer);

const closeButton = document.querySelector(".btn-close");
closeButton.addEventListener("click", () => {
  document.querySelector(".popup").classList.remove("show");
  overlay.style.display = "none";
});

$(".slider-for").slick({
  slidesToShow: 1,
  autoplay: true,
  slidesToScroll: 1,
  arrows: false,
  dots: false,
  fade: true,
  asNavFor: ".slider-nav",
});

$(".slider-nav").slick({
  slidesToShow: 3,
  slidesToScroll: 1,
  asNavFor: ".slider-for",
  dots: false,
  arrows: false,
  centerMode: true,
  focusOnSelect: true,
});
----------------------------------------------------------------------------------------------------
/* Quick view CSS */

body {
  position: relative;
}
.container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.product-card {
  position: relative;
  overflow: hidden;
}

.btn-quick {
  cursor: pointer;
  position: absolute;
  display: none;
  z-index: 1;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid #fff;
  border-radius: 5px;
  color: #fff;
  padding: 1em 2em;
}

.product-card:hover .btn-quick {
  display: block;
}

.product-card::before {
  content: '';
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  position: absolute;
  transform: translateZ(-1px);
  transition: opacity 0.3s ease;
  opacity: 0;
  left: 0;
  top:0;
}

.product-card:hover::before {
  opacity: 1;
  z-index: 1;
}

.popup {
  visibility: hidden;
  z-index: -1;
  position: absolute;
  background-color: #fff;
  border-radius: 5px;
  top: 3%;
  left: 50%;
  width: 90%;
  transform: translate(-50%, -50%);
  padding: 2em;
}

.btn-close {
  cursor: pointer;
  top: 10px;
  right: 10px;
  position: absolute;
}
.show {
  visibility: visible;
  z-index: 1000;
}
.overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
}
.slider-for, .slider-nav {
  margin: 0 auto 10px;
}
.slide-item img {
  width: 50%;
  max-height: 300px;
  margin: 0 auto;
}
.thumbnail-item img {
  margin: 0 auto;
  max-height: 300px;
}