Lightbox

블로거들이 사용하는 플러그인의 통계를 내면 그 상위에 Lightbox 플러그인이 있을 것이라는 생각이 든다. 나도 이 Lightbox 플러그인을 꽤 오래 전부터 계속 사용해 왔다. 이 플러그인의 핵심은 'Lightbox'이다. Lightbox는 큰 그림을 자동으로 웹 페이지의 크에 맞게 자동으로 줄여주며 클릭하면 확대된 이미지를 보여준다. Lightbox JS, Lightbox Plus 등 판도 여러 가지이다.

블로거들이 사용하는 플러그인의 통계를 내면 그 상위에 Lightbox 플러그인이 있을 것이라는 생각이 든다. 나도 이 Lightbox 플러그인을 꽤 오래 전부터 계속 사용해 왔다. 이 플러그인의 핵심은 'Lightbox'이다. Lightbox는 큰 그림을 자동으로 웹 페이지의 크에 맞게 자동으로 줄여주며 클릭하면 확대된 이미지를 보여준다. Lightbox JS, Lightbox Plus 등 판도 여러 가지이다.

Lightbox는 여러 가지로 유용한 프로그램이지만 그림의 크기를 줄이기위해 단순히 '<IMG> 태그의 WIDTH 속성'을 이용한다. 스크립트로서 처리할 수 없는 분분이기는 하지만 바로 이 부분때문에 이 플러그인을 공개하게 되었다. 내가 불편하게 느끼는 점은 다음과 같다.

  • 전송량 증가
    단순히 그림의 WIDTH 속성으로 크기만 조절한 것이기 때문에 실제 큰 파일이 전송된다. 따라서 이런 그림이 많은 경우 전송량이 상당히 증가한다.
  • 선명도 손상
    그림의 'WIDTH 속성'만 바꾸면 크기 조절은 인터넷 탐색기가 담당하며, 이 경우 그림의 선명도가 떨어진다.

그래서 만든 플러그인이 ResampleLB이다. 이 플러그인은 사용자에게 표시되는 작은 그림은 원본 그림을 그대로 출력하지 않는다. 내부 프로그램으로 그림의 크기를 줄이며 이 과정에서 그림을 다시 샘플링함으로서 그림이 더 선명하게 표시할 수 있도록 한다.

다음 두 그림을 비교하면 다시 샘플링하는 것의 효과를 분명하게 알 수 있을 것이다.

WIDTH 속성 ResampleLB

그동안 계속 Lightbox 플러그인을 판올림도 하지 않고 사용하다가 불현듯 Random Photo Viewer 확장에서 공개한 확장을 이용하면 Lightbox에서도 쉽게 작은 그림을 다시 샘플링해서 보여줄 수 있겠다는 생각이 들었다. 따라서 이렇게 급조한 플러그인이다.

다만 태터툴즈의 홈페이지에서 새로 올라온 Lightbox 플러그인을 보니 상당히 여러 가지 기능이 추가되어 있고 따라서 굳이 이 플러그인을 발표할 필요을 느끼지 못했다. 기능은 예전 Lightbox Plus(소스도 예전 소스를 그대로 사용)와 같다. 다만 작은 그림의 경우 Random Photo Viewer 확장으로 그림의 크기를 줄이고, 다시 샘플링하기 때문에 기존의 Lightbox 플러그인을 사용하는 것보다 훨씬 선명하다.

발표를 하자니 그렇고 그대로 썩히자니 필요한 사람도 있을 것 같아 공식적인 공개는 하지 않고 필요한 사람만 내려받을 수 있도록 블로그를 통해 공개하게 되었다.

설치하는 방법은 간단하다. 내려받은 파일을 태터툴즈의 플러그인 폴더(plugins)에 올리고 '관리도구/플러그인'에서 'ResampleLB 플러그인'을 '사용중'으로 바꾸면 된다.

당연한 얘기지만 이 플러그인을 사용하려면 Lightbox 플러그인을 '미사용'으로 바꾸어야 한다. 아울러 태터툴즈를 루트에 설치하지 않은 사람은 lightbox_plus.js의 마지막 부분의 경로를 자신의 환경에 맞게 바꾸어야 아이콘이 정상적으로 나타난다.

loadingimg:'/plugins/vResampleLB/images/loading.gif',
expandimg:'/plugins/vResampleLB/images/expand.gif',
shrinkimg:'/plugins/vResampleLB/images/shrink.gif',
//effectimg:'/plugins/ResampleLB/images/zzoop.gif',
effectpos:{x:-40,y:-20},
effectclass:'effectable',
closeimg:'/plugins/vResampleLB/images/close.gif'

관련 글타래