🎨 fslightbox - 성능 좋은 이미지 라이트박스 라이브러리

fslightbox.js 

티스토리에 기본으로 내장되어있는 라이트박스 라이브러리는 lightbox2.js 로서 무겁고 느리다.

반면, fslightbox.js 라이브러리는 이미지, 비디오 또는 사용자 지정 소스를 통해 원하는 모든 것을 깔끔한 오버레이 상자에 표시하는 종속성이 없는 바닐라 자바스크립트 플러그인이다. 사용하기 쉬우면서도 가벼우며 이미지, HTML 동영상, YouTube 동영상 등 다양한 유형의 소스를 깔끔한 오버라이팅 박스에 표시할 수 있다.

Chrome, Firefox, Edge, Opera, IE 브라우저 모두 사용이 가능하며, 또한 리액트와 뷰 프레임워크에 대해서도 지원한다. 다만 몇가지 애니메이션이나 상위 기능은 Pro 라이센스를 써야해서 유료화가 필요하다. 그래도 기본적인 라이트박스 기능은 준수한 편이다.

Fullscreen Lightbox | Vanilla JavaScript Lightbox Plug-in

마우스를 양쪽으로 슬라이딩하면 다음 사진으로 오버레이된다.

---

fslightbox 사용법

이 포스팅에선 일반적인 바닐라 자바스크립트로 설치 및 사용하는 방법을 진행해 보겠다.

 

기본 정적 세팅

우선 자신의 사이트의 이미지 엘리먼트에 대해서 라이트박스를 적용하기 위해선 사전 단계가 필요한데, 아래와 같이 <img> 태그를 <a> 태그로 감싸고 속성으로 이미지 경로를 가진 href 와 data-fslightbox 를 기재해준다. 그리고 fslightbox.js 스크립트 소스를 로드 하면 된다. 그러면 data-fslightbox 속성이 있는 모든 <a> 요소가 라이트박스를 열수 있게 된다.

<a data-fslightbox href="https://i.imgur.com/fsyrScY.jpg">
	<img src="https://i.imgur.com/fsyrScY.jpg" alt="Image">
</a>

<a data-fslightbox href="https://i.imgur.com/fsyrScY.jpg">
	<img src="https://i.imgur.com/fsyrScY.jpg" alt="Image">
</a>

<!-- a태그안에 img 태그가 없어도 된다 -->
<a data-fslightbox href="https://i.imgur.com/fsyrScY.jpg">0</a>

<!-- 라이트박스 스크립트 로드 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fslightbox/3.4.1/index.min.js"></script>

 

자바스크립트로 동적 세팅

다만 티스토리와 같은 써드 파티 서비스를 이용할 경우 html의 요소를 미리 바꾸지 못할때는 자바스크립트로 후처리 작업을 해주어야 하는데 방법은 다음과 같다.

// <img> 태그에 <a> 태그를 래핑함
function wrap(img) {
    const el = document.createElement('a');
    el.setAttribute('data-fslightbox', 'gallery');
    el.href = img.src;
    // 첫번째 인수로 전달받은 노드를, 두번째 인수로 전달한 노드의 바로 앞에 삽입
    img.parentElement.insertBefore(el, img);
    el.appendChild(img);
}

document.querySelectorAll('img').forEach((el, idx) => {
        wrap(el);
});

refreshFsLightbox(); // fslight 재설정

 

비디오 라이트박스

이미지 뿐만 아니라 비디오나 유튜브 영상도 라이브박싱이 가능하다.

<a data-fslightbox="gallery" href="https://i.imgur.com/fsyrScY.jpg">
	Image
</a>

<a data-fslightbox="gallery" href="https://www.youtube.com/watch?v=3nQNiWdeH2Q">
	YouTube video
</a>

<a data-fslightbox="gallery" href="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4">
	HTML video
</a>

 

만일 Vimeo 비디오, Google 지도 등과 같은 사용자 지정 콘텐츠를 표시하려면 "href" 속성에 "#" 접두사가 있는 사용자 지정 소스의 ID를 전달해야 한다.

<a data-fslightbox="lightbox" href="#vimeo">
	Image
</a>

<iframe
    src="https://player.vimeo.com/video/22439234"
    id="vimeo"
    width="1920px"
    height="1080px"
    frameBorder="0"
    allow="autoplay; fullscreen"
    allowFullScreen
></iframe>