fancy 쓰는법

<link
    rel="stylesheet"
    href="https://cdn.jsdelivr.net/npm/@fancyapps/ui/dist/fancybox.css"
  />

 

---

 

<div class="main_img">
  <a href="/theme/TYPE01/img/img1.png" data-fancybox="gallery"><img src="/theme/TYPE01/img/img1.png" alt="" ></a>
  <a href="/theme/TYPE01/img/img2.png" data-fancybox="gallery"><img src="/theme/TYPE01/img/img2.png" alt=""></a>
  <a href="/theme/TYPE01/img/img3.png" data-fancybox="gallery"><img src="/theme/TYPE01/img/img3.png" alt=""></a>
</div>

 

---

 

<script type="text/javascript">
Fancybox.bind('[data-fancybox="gallery"]', {
dragToClose: false,

Toolbar: false,
closeButton: "top",

Image: {
  zoom: false,
},

on: {
  initCarousel: (fancybox) => {
    const slide = fancybox.Carousel.slides[fancybox.Carousel.page];

    fancybox.$container.style.setProperty(
      "--bg-image",
      `url("${slide.$thumb.src}")`
    );
  },
  "Carousel.change": (fancybox, carousel, to, from) => {
    const slide = carousel.slides[to];

    fancybox.$container.style.setProperty(
      "--bg-image",
      `url("${slide.$thumb.src}")`
    );
  },
},
});
</script>
<script src="https://cdn.jsdelivr.net/npm/@fancyapps/ui@4.0/dist/fancybox.umd.js"></script>