hELLO 스킨 FancyBox 추가하는 스크립트

FancyBox

티스토리에서 lightbox기능이
예전처럼 잘되지 않는 것 같습니다.

그래서 다른 라이브러리를 찾다가
FancyBox를 사용하는 분의 글을 보게 되어
기록을 남겨놓습니다.

FancyBox Script

<!--fancy box-->
  <script defer src="https://cdnjs.cloudflare.com/ajax/libs/fancyapps-ui/4.0.31/fancybox.umd.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancyapps-ui/4.0.31/fancybox.min.css" />
<script>
  function replaceLightbox() {
    HTMLCollection.prototype.forEach = Array.prototype.forEach;
    let s = document.getElementsByTagName("span");
    s.forEach((e) => {
      if ("lightbox" in e.dataset) {
        delete e.dataset.lightbox;
        e.dataset.fancybox = "fancybox";
        e.dataset.src = e.getElementsByTagName("img")[0].dataset.src;
      }
    });
  }

  window.addEventListener("DOMContentLoaded", () => {
    Alpine.start();
    replaceLightbox();
  });

</script>
<!-- fancy box End -->

head사이에 스크립트를 추가해 주시면 됩니다.

기존의 티스토리 lightbox부분을 삭제하고
FancyBox속성으로 바뀌어 넣습니다.

그렇기 때문에 전체 이미지가 FancyBox속성으로
바뀌기 때문에 이미지는 무조건 갤러리 형식으로 고정됩니다.

알아두세요

hELLO스킨을 사용하시는 분들은
아래 코드를 주석처리 해주셔야 합니다.

window.addEventListener('DOMContentLoaded', function() {
  return Alpine.start();
});

주석처리를 하지 않으면
Alpine.start를 두 번 호출하여
페이지에 오류가 발생할 수 있습니다.