블로그에 라이트박스 기능을 적용했습니다.

by hfkais | 2014. 4. 18. | 0 comments

사실 구글 Blogger에는 자체적으로 라이트박스 기능이 들어있습니다. 사진을 첨부하면 알아서 멋진 라이트박스로 보여주죠. 하단에 썸네일도 나오고, 무척 좋은 기능입니다. 설정에서 간단히 온/오프 할 수도 있죠. 포스트 본문에 삽입된 작은 사진을 크게 보여주기 때문에 간단히 사진 갤러리로도 사용할 수 있습니다.

하지만 2006년부터 꾸준히 커스터마이징을 해온 제 블로그 템플릿에서는 어떤 이유에선지 작동하지 않았습니다. 2009년에 구형 템플릿 -> 레이아웃(편의상 구분) 방식으로 변경한 이후 다시 최신 템플릿에 맞춰 바꿔야 하지만, 시간도 없고 아무래도 영 귀찮네요. 여기저기 손댄 부분도 많은데 그걸 다 옮겨오기가 겁날 정도입니다.

해외 사이트도 뒤져보고 여러 방법을 모색해 봤지만 결국 해결하지 못했습니다(라이트박스 관련 스크립트가 각 국가 언어별로 따로 제공되더군요). 그래서 아예 직접 만들까도 고민했습니다. 그 결과물이 이것 입니다만 결국 완성은 못했습니다. 원리는 간단하죠. 구글플러스에 올린 사진을 블로그에 삽입했을 때, 버튼을 누르면 중간의 주소값을 바꿔 좀더 큰 사진을 보여주도록 하는 것입니다. 어늦어도 구현도 되었지만 나머지 정리하는데 손이 많이가서 결국 중단하게 되었네요.

그러다 우연히 찾은 http://baksimgorkii.blogspot.kr/2010/10/blogspot-lightbox.html 이 글에 소개된 플러그인이 괜찮아보인다 싶었습니다. 예전에 여기저기서 자주 보였던 라이트박스 플러그인인데 Blogger 용으로 개조가 잘 되어 있더군요.

적용해봤더니 잘 됩니다. 다만 이미지 사이즈와 애니메이션 속도, 구글플러스에서 가져온 사진 파라미터 등이 약간 달라 수정을 좀 했습니다. 결과적으로 큰 사진을 1000px로 보여주고, 애니메이션 속도는 더 빠르게 했으며, 구글플러스의 사진도 문제 없이 보여지도록 했습니다.

지금 당장은 얼마 전 올린 꼬마버스 타요 직찍 사진마니산 일출 사진 포스트에 적용되어 있습니다. 앞으로 구글플러스에 올렸던 사진들도 블로그에서 많이 소개하고자 합니다.


전체 내용 보기