fancybox가 골치거리였는데 이젠 미련이 없다

이 글은 2016년 12월에 적은 글이라 이 블로그에 모달에 동영상에 나오는 것과 차이가 있다. 그러니 예는 소스를 다운로드 받는 곳에서 보기 바란다.

fancybox라는 jquery lightbox(라이트박스)에 미련이 많았다. 이 블로그에서 적었던 jquery fancybox에 대한 글이 약 10개 정도 있다. 그런데 스킨을 변경한 후 모두 작동이 안돼 속상해 미련이 많았다. 아래에서 보듯이 난 펌을 못하게 그림으로만 설명하지 않고 글에 직접 스크립트를 적용해 보여준다. 

그래서 부트스트랩에서 제대로 동작하는 fancybox 소스를 찾으려고 노력했다. 주로 http://bootsnipp.com/에서  fancybox라는 검색어로 검색하면 찾을 수 있어서 자주 검색한다. 그런데 부트스트랩 상위 버전으로 가면 안 되는 문제가 발생했다. 최근 찾은 소스도 부트스트랩 3.0.3에서 제대로 작동할지 모르나 난 부트스트랩 3.3.4를 사용하여 작동하지 않았다. 

그때 여러 번 그런 경우가 많아 fancybox를 부트스트랩과 궁합이 안 맞다는 것을 어렴풋이 느꼈다. 그리고 부트스트랩 3.3.4 이후에 4.0 정식이 나오면 사용하려고 하는데 그때도 fancybox를 찾아 헤매고 싶지 않았다. fancybox보다는 못 하지만 부트스트랩 라이트박스을 보고 jquery fancybox에 대한 미련을 완전히 벗었다.  참고로 부트스트랩 모달에 사진,동영상, 웹페이지 등을 넣을 수 없습니다. 모달에는 단지 텍스트만 넣을 수 있습니다. 사진 등을 넣고 싶다면 아래 부트스트랩 라이트박스를 적용했으면 한다. 어떤 사람은 부트스트랩 모달에 사진,동영상을 넣을 수 있는 것으로 착각하는 경향이 있다.

• 부트스트랩 라이트박스 : http://ashleydw.github.io/lightbox

현재 부트스트랩 라이트박스는 fancybox처럼 많은 기능은 지원하는 것은 아니다. 그렇지만 꾸준히 업데이트만 이루어진다면 많은 기능을 지원할 것이라 생각한다. 이 블로그 곳곳에 부트스트랩 라이트박스를 사용한 곳이 보일 것이다. fancybox처럼 아래와 같이 갤러리 등을 넣을 수도 있다. 

아래와 같이 유튜브 동영상이 부트스트랩 라이트박스에 나오게 할 수 있다. 참고로 페이지 로딩이 끝나지 않은 후 아래 동영상을 클릭하면 유튜브에서 동영상이 재생된다. 만약 모달에서 동영상을 재생하고 싶다면 페이지 로딩이 됐는지 확인했으면 한다. 그리고 재생 버튼.시간 등은 라이트박스와 상관없는데 이것에 대한 소스는 여기에 있다. 라이트박스에 유튜브 동영상이 재생된다는 것에 유념했으면 한다. 참고로 fancybox 경우는 동영상 차례로 나오게 할 수 있다. 

• 03:07
• 04:47
• 04:47
• 03:20
• 04:32
• 04:06

가장 마음에 드는 것인데 게시판이나 사이트 등을 모달에 넣을 수 있게 가능한 것인데 전에는 안 됐는데 업데이트가 된 후 가능하게 된 모양이다. 특히 모달에 게시판을 넣고 싶었다. fancybox에 넣었는데 모달에 넣을 수 없어 안타까웠는데 이제는 넣을 수 있을 것 같다. 그런데 네이버를 모달에 넣으려고 하니 안 된다. 모든 것을 모달 안에 넣을 수 있을 것이라 생각하면 안될 것이다.

티스토리 홈페이지

게시판만 단독으로 넣고 싶지만 게시판이 없어서 무료 게시판도 얻을 수 있겠지만 블루 CGI에서 제공하는 무료 게시판을 이 블로그에는 적절하지 않을 것이다. 왜냐하면 이 블로그는 반응형이고 게시판을 반응형이 아니라서....그래서 예전에 XE(구 제로보드 XE)를 설치해서 게시판만 사용했던 기억이 난다. XE는 반응형이다.

이 블로그는 부트스트랩을 사용하므로 부트스트랩 lightbox를 사용하지만 다른 스킨을 부트스트랩 lightbox 사용을 추천하지 않는다.  jquery lightbox는 fancybox 등 많으니 거기에서 선택했으면 한다. 그리고 fancybox는 2013/03/16 - jQuery fancybox, 다운로드와 라이선스에서 적었으니 참고했으면 한다.