티스토리 문제로 Lightbox를 사용할 수 없게 되었다. 그래서 대안을 찾다가 FancyBox를 넣은 분의 글을 찾게되어 정리해둔다.
1. HTML head에 아래의 스크립트를 추가해준다.
<!--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 끝 -->기존의 티스토리 코드의 lightbox 부분을 삭제하고 data-fancybox="fancybox" 속성을 삽입한다. 아쉽게도 이 설정을 적용하면 전체 이미지가 fancybox라는 그룹으로 묶이게 되기 때문에 무조건 이미지 보기는 갤러리 형식으로 고정된다. 원래 fancybox는 data-fancybox만 넣어줘도 사용할 수 있지만 티스토리의 lightbox가 아직 완전히 삭제되지 않았기 때문에 data-fancybox만 넣을 시에는 이미지를 클릭해도 동작하지 않는다.
원본 코드에는 맨 밑에 한 줄이 더 있는데, 확인해보니 해당 코드는 동작하지 않아서 삭제했다. 해당 코드는 Fancybox의 기능으로 슬라이드가 끝나도 계속 슬라이드를 진행하는 걸 false로 설정하는 옵션인데, 아쉽지만 head에 스크립트를 삽입하여 해당 기능을 사용할 수는 없어보인다.
2. script.js 파일의 맨 밑에 있는 다음 코드를 주석 처리해준다.
주석처리를 하지 않을 시 Alpine.start를 두 번 호출하는 게 되어버리기 때문에 페이지가 두 번 깜빡거린다고 한다.
window.addEventListener('DOMContentLoaded', function() {
return Alpine.start();
});
