부트스트랩5에 적절한 라이트박스를 찾았다.

이 글에서 부트스트랩 버전 5에서 사용할 수 있는 라이트박스에 대해 적으려고 한다. 

 

이 블로그에서 사용하고 있는 아래 라이트박스는  Lightbox for Bootstrap라는 라이트박스(lightbox)를 사용 중으로 마음에 든다.  라이트박스는 Jquery를 사용하는 부트스트랩 버전 3과 4에 사용할 수 있다. 티스토리에서 이미지를 클릭하면 나오는 것과 비슷하다.

 

• 탑건 4:14
• 끝없는 사랑 04:26
• 영화 제리맥과이어 - Hard to say I'm sorry 04:23
• 영웅본색 - 당년정 04:36

 

그런데 Jquery를 사용하지 않는 버전 5에서는 사용할 수 없다. 부트스트랩 버전 5에 적절한 멋있는 라이트박스를 찾았으나 마음에 드는 것이 없었다. 부트스트랩 공식 홈페이지에서 부트스트랩 5에 맞는 라이트박스로 https://trvswgnr.github.io/bs5-lightbox/에 있는 것을 소개하고 있었지만 내 마음에는 들지 않았다. 

 

왜냐하면 모달에 사진 및 동영상 등이 모달에 나오지 않았기 때문이다. 이전과 차이가 많았기 때문이다. 

 

 

지금 이 블로그에서 사용하고 있는 라이트박스가 부트스트랩 5에 맞게 업데이트되기를 바랐다. 하지만 몇 년이 지나도 그럴 기미가 보이지 않아 포기했다. 며칠 전 여기에서 부트스트랩 버전 5에 맞는 테마를 보다가 Glightbox라고 마음에 드는 라이트박스를 보았다.

---

Glightbox가 jQuery를 사용하지 않는 것도 좋았고 사진, 동영상(유튜브, 비메오 등), 페이지 등을 라이트박스(Light)에 나타나게 할 수 있다. 예를 Glightbox 페이지인 https://biati-digital.github.io/glightbox/에서 볼 수 있다. 이 글에서 기본적인 Glightbox를 보여주고 싶은데 보여줄 수가 없다. 왜냐하면 이 블로그에 설치된 라이트박스와 충돌로 인해 나오지 않았다. 

 

• Glightbox : https://biati-digital.github.io/glightbox/

 

라이트박스가 없는 부트스트랩 버전 5로 만든 내 티스토리에서 해 보니 됐다. 아래는 글에 삽입한 소스고 블로그 전체에 적용되게 하려면 CSS와 스크립트를 HTML 편집(HTML)에 삽입해야 한다. 참고로 전에 말했듯 이 블로그는 버전 3으로 만들었다.

 

 

 

사용 방법 

 

사용 방법은 압축을 푼 파일에서 README.md를 열어서 보면 옵션 등이 나온다.

 

1. CSS, JS를 티스토리에 올려 사용할 수 있지만 나는 CDN을 사용했다. 위 그림에 나온 CSS와 JS도 README.md에 나온 CD CDN이다. 만약 CSS나 JS 파일을 원한다면 압축 파일을 푼 dist 폴더를 보면 된다.
2. HTML에 삽입한다고 한다면 CSS는 </head> 위에 삽입하고 JS 및 <script></script>는 </body> 위에 삽입한다. 

---

다른 사람에게는 설치 과정, 제목 설정 등만 보면 https://biati-digital.github.io/glightbox/보다  https://trvswgnr.github.io/bs5-lightbox/이 좋은 것으로 보일 것 같다. 그렇지만 나는 위에서 적었듯 모달에 나오는 사진, 동영상 등이 익숙해서 아니다.