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'

관련 글타래

글쓴이
author image
운영체제의 모든 것을 운영하고 있는 IT 블로거. IT 블로거라는 이름은 현재 시국때문에 시사 블로거로 바뀐 상태다. 그러나 나는 아직도 시사와 사회에 관심이 많은 IT 블로거일 뿐이다. 컴퓨터, 운영체제, 시사, 가족, 여행, 맛집, 리뷰등과 살면서 느끼는 소소한 일상이 블로그의 주제이다. 왼쪽의 아이콘은 둘째 딸 다예가 그린 내 모습이다.
2007/01/10 14:09 2007/01/10 14:09
오늘의 글
인기있는 글
조회수 많은 글 | 베오베
댓글 많은 글 | 베오베

Trackback

Trackback Address :: https://offree.net/trackback/617

Facebook

Comments

  1. 루돌프 2007/01/10 16:30

    저는 개인적으로 애초에 업로드 할때 작게 해서 올리기 때문에;;
    티스토리에 적용된게 어느건지 모르겠네요;;
    요즘 버젼도 축소하면 저렇게 나올까요...-_-;
    아니면 저런거 좀 추가해줬으면 하는데...

    perm. |  mod/del. reply.
    • 도아 2007/01/10 17:34

      저도 처음에는 작게 해서 올렸습니다. 그런데 그게 귀찮습니다. 특히 컴퓨터 팁을 작성하면서 잡은 화면을 매번 줄이는 것은 무척 귀찬더군요. 그래서 QAOS.com에서 사용하려고 만든 프로그램입니다.

      QAOS.com에서 쓰는 프로그램은 크기도 자동으로 조절하고 워터 마크도 자동으로 넣어줍니다.

  2. 엔하늘 2007/01/10 16:33

    네, 저도 이미지가 일그러지는 것이 싫어서 웬만하면 재편집해서 업로드하는데 참으로 불편하지요. 상당히 유용한 플러그인일듯 합니다!! 다만 저는 티스토리 유저라...OTL....

    perm. |  mod/del. reply.
    • 도아 2007/01/10 17:35

      이 부분은 저도 어쩔 수 없는 부분입니다. 워낙 급조해서 호환성에도 문제가 있을 것으로 생각되기 때문에 티스토리에 올라갈 일도 없을 것 같습니다.

  3. hoogle 2007/01/10 16:54

    손으로 직접 사진을 사이즈 맞추고 했었는데...
    유용할 것같네요. 블로그에 한번 적용해보겠습니다.
    좋은정보 감사합니다.

    perm. |  mod/del. reply.
    • 도아 2007/01/10 17:35

      단일 사용자 계정에 루트 설치를 전제로 했기 때문에 오동작할 수 있습니다. 오동작하는 부분은 알려 주시기 바랍니다.

  4. thinkfish 2007/01/10 17:02

    항상 Lightbox쓰면서 맘에 걸리던 부분이었는데 가려움을 긁어주는 플러그인 갔습니다.^^
    그런데 다운받아보니 images폴더에 이미지가 없는데 그게 원래 없는건가요?
    설치하고 사용중으로 설정하고 블로그에 들어가니 올렸던 이미지가 모두 안보여서 다시 미사용으로 바꾸었습니다.
    ㅠ.ㅠ
    root설치가 아니라서 위의 붉은글씨부분 앞에 /tt/라고 써줬는데 그렇게 하는게 맞는건지도 모르겠내요ㅠ.ㅠ

    perm. |  mod/del. reply.
    • 도아 2007/01/10 17:40

      그런데 다운받아보니 images폴더에 이미지가 없는데 그게 원래 없는건가요? 업로드를 잘못해서 생긴 현상입니다.

      설치하고 사용중으로 설정하고 블로그에 들어가니 올렸던 이미지가 모두 안보여서 다시 미사용으로 바꾸었습니다. image.php 파일의 경로 문제인 것 같습니다.

      root설치가 아니라서 위의 붉은글씨부분 앞에 /tt/라고 써줬는데 그렇게 하는게 맞는건지도 모르겠내요ㅠ.ㅠ 맞습니다. 따른 부분을 건들지 않았다면.

      http://pjjk.com/tt/plugins/vresamplelb/ ··· ht%3D200 로 접속하면 이미지가 줄어드는 것으로 봐서 index.php 파일에서 image.php 파일의 경로가 틀려서 발생하는 현상같습니다. 수정본을 다시 올려 두도록 하겠습니다.

  5. graphittie 2007/01/10 18:22

    TNF에서 활동중인 graphittie입니다. 1.1 버전부터는 테스트 용이기는 하지만 태터툴즈 내부에 리샘플링 기능이 포함되어 있는데요, 혹시 이 기능에서 미흡한 점을 발견하신 것인지요?

    perm. |  mod/del. reply.
    • 도아 2007/01/10 18:31

      1.1에 포함된 리샘플링 기능은 워터마크를 넣을 때에만 사용되는 기능이 아니었나요?

      다시 검사해봐도 워터마크를 설정하지 않은 상태에서는 원래의 그림이 표시됩니다. 워터마크를 설정해서는 사용해보지 않아서 모르겠지만 워터마크를 넣기 위해서는 사용할 것으로 보입니다만...

  6. goohwan 2007/01/10 20:59

    역시 티스토리인지라 눈물을 머금고 좋은 플러그인에게 인사만 할 뿐입니다. ㅜㅜ
    언젠간 티스토리에도 도아님 플러그인이 많이 많이 올라왔으면 좋겠네요 ^^

    perm. |  mod/del. reply.
    • 도아 2007/01/11 08:01

      graphittie님의 답변을 보면 조만간 태터툴스 내에 다시 샘플링하는 기능이 포함될 것 같더군요.

  7. 유마 2007/02/07 18:22

    어디 해야 될지 몰라서 일단 이 글에 질문을 던져봅니다.
    워터마크를 태터 내장 기능을 사용하시지 않으시는 것 같아요.
    직접 사진에다가 넣으시나요? 아니면... 다른 플러그인이나? 프로그램으로 처리하시나요?

    perm. |  mod/del. reply.
    • 도아 2007/02/07 18:48

      QAOS.com에 이미 구현된 기능입니다. 블로그에서는 얼마전 발표한 ResampleLB 라는 플러그인을 사용하고 있고요. 플러그인에 관한 질문은 해당 플러그인이나 위의 메뉴중 플러그인 메뉴를 클릭하고 질문하면 됩니다.

  8. 유마 2007/02/07 19:29

    ResampleLB 에 워터마크 기능이 있나요? 저도 어제 워터마크를 써볼가 해서 태터 내장 기능과 LightBox 등을 사용해보고 이리저리 살펴보다 현재 ResampleLB 를 사용중인데.. 설정 자체가 없으니...

    플러그인 메뉴에서 살펴봤는데, 워터마크에 대한 플러그인은 없는 것 같아서 ^^

    perm. |  mod/del. reply.
    • 도아 2007/02/08 10:32

      글을 읽어 보시면 아시겠지만 없습니다.

  9. 유마 2007/03/27 21:31

    훔.. 이상하니~ 제가 이미지를 클릭하면 라이트박스가 되질 않습니다. 계속 로딩만 됩니다. --a
    그런데, 썸네일 플러그인에서는 잘 됩니다. J.파커님 썸네일 플러그인에서 라이트박스를 사용할 수 있는데,
    그건 물론, 라이트박스 플러그인이 있을 경우 해당하는데, 제 경우는 도아님의 이 플러그인이 해당될 겁니다.

    사이드바와 리스트 상 썸네일에서는 라이트박스가 잘 됩니다만, 이상하니 본문에서는 로딩 장면에서 계속 로딩만 됩니다. --a

    되고 있는 걸까요? 안되는 걸까요?... 로딩만 되는건 왜 그런건가요?

    perm. |  mod/del. reply.
    • 도아 2007/03/28 09:21

      무슨 얘기인지 알 수가 없습니다. 제 플러그인이 동작하지 않는다는 얘기인가요?

    • 유마 2007/03/28 09:57

      아니요. 그걸 잘 모르겠어요.
      그러니까, 썸네일 플러그인도 라이트박스를 사용할 수 있는데, 자차내에 내장된 것이 아니라, 라이트박스 플러그인을 사용하고 있다면 썸네일에서도 라이트박스를 사용할 수 있다는 말인데요. 제가 사용하는 라이트박스 플러그인은 이 플러그인이거든요. 그럼, 라이트박스가 제대로 되거 있다는 말은 맞는데, 문제는 본문의 이미지는 라이트박스가 되질 않고, 로딩 부분에서 멈춰만 있어요.. 아무리 기다려도.. --a 썸네일에서는 잘되는데..

  10. bakion 2007/07/17 11:22

    그림을 축소했을 때 해상도가 좋지 않아서 항상 화일을 2개로 업로드했었는데, 도아님의 플러그인으로 너무 편리하게 사용할 수 있게 되었습니다. 감사합니다.

    perm. |  mod/del. reply.
    • 도아 2007/07/17 15:53

      도움이 되셨다니 다행입니다. 저도 제가 필요해서 만든 플러그인입니다.

  11. 댕글댕글파파 2007/10/11 15:25

    도아님의 댓글을 보고 저도 이 플러그인을 다운 받아서 바로 적용을 해 보았습니다.
    그런데 사용자 이미지 삽입이라는 글만 뜨고 이미지는 나타나질 못하는 것입니다.
    경로가 잘 못되어서 그런듯 한데 이유를 잘 모르겠습니다.
    제가 설치를 한 순서는
    1. 플러그인 다운로드
    2. 플러그인 업로드
    3. Lightbox TT AZ 플러그인 미사용으로 전환
    4. Resampled LB 플러그인 사용중으로 전환

    업로드를 하기 전에 경로 변경 내용
    제 ftp 경로를 보면 /www/tt/plugins 이곳에 플러그인을 설치했습니다.
    처음엔 도아님이 제시해 주신 곳의 앞부분에 /tt/를 넣어서 적용을 했습니다.
    loadingimg:'/tt/plugins/vResampleLB/images/loading.gif', 이런식으로요.
    그런데 이미지가 나타나질 않아서 /www/tt/ 이렇게 넣어 보았으나 그래도 이미지가 나타나지 않습니다.

    이유가 먼질 모르겠습니다. ㅠ_ㅠ

    perm. |  mod/del. reply.
    • 도아 2007/10/11 16:42

      클릭했을 때 이미지가 나오지 않는 것인가요? 아니면 페이지에도 나오지 않는 것인가요?

    • 댕글댕글파파 2007/10/12 08:59

      페이지 자체에 나오지 않습니다.
      그래서 현재는 Lightbox TTAZ를 다시 사용중입니다.

    • 도아 2007/10/12 09:50

      1. 플러그인을 활성화
      2. 깨진 그림에 마우스 오른쪽 단추를 클릭
      3. 속성 메뉴 클릭
      4. 그림의 URL 복사

      해서 URL을 알려 주시기 바랍니다.

    • 댕글댕글파파 2007/10/12 10:13

      http://www.musecine.com/tt/plugins/vResampleLB/image.php//ttattach/1/1019773485.jpg?width=550&height=246
      이렇게 나오네요..
      저 주소로 들어가보니 무슨 글이 많은데 봐도 까막눈이네요...-_-;;

    • 도아 2007/10/12 10:17

      ResampleLB.zip을 다시 내려받아 사용해 보시기 바랍니다.

    • 댕글댕글파파 2007/10/12 10:47

      자꾸 번거롭게 하는것 같습니다..-ㅁ-
      도아님께서 새로 올려주신 플러그인을 적용하니 게시글에 보이는 사진은 이제 리샘플링되어서 이쁘게 보이는데 그 사진을 클릭하면 아무런 변화가 없습니다...ㅡ.ㅡ
      이런 스킨이나 소스같은걸 보고 해석할 수 있을려면 html이나 php 이런걸 공부해야겠죠?

    • 도아 2007/10/12 11:09

      자바 스크립트의 경로를 바꾸지 않으셨더군요. .js 파일의 마지막에 /tt를 넣어 주어야 됩니다.

    • 도아 2007/10/12 11:59

      스크립트의 경로를 바꾸시고 파일을 다시 내려받아 보시기 바랍니다. 문제가 있어서 수정해 두었습니다.

  12. 댕글댕글파파 2007/10/12 13:08

    관리자만 볼 수 있는 댓글입니다.

    perm. |  mod/del. reply.
    • 도아 2007/10/12 13:13

      파일을 다시 내려받으라고 했는데 다시 내려받지 않으셨더군요. 수정해 두었습니다. 비번은 바꿔두시기 바랍니다.

    • 댕글댕글파파 2007/10/12 14:34

      감사합니다. 덧글에 있는걸 다시 내려받아서 했는데 이상하게 되었나 봅니다..-_-;;

  13. 겔롱 2008/02/26 23:17

    텍스트큐브에서는 정상 동작을 안하는군요...
    사용자삽입이미지라는 글과 함께 배꼽이 보이네요....
    꼭 사용했으면 하는 플러그인인데
    어떻게 방법이 없을까요??
    경로는 틀리지 않았습니다만....

    perm. |  mod/del. reply.
    • 도아 2008/02/27 10:31

      제가 사용하고 있는 것도 텍스트큐브입니다. 그러나 저는 잘 동작하고 있습니다. 따라서 실제 플러그인을 활성화하고 해당 페이지를 알려 주시면 제가 확인해 보도록 하겠습니다.

    • 겔롱 2008/02/27 12:29

      플러그인 활성화 했구요...
      주소는 http://cafeall.com 입니다.
      부탁드리겠습니다.

    • 도아 2008/02/27 12:36

      사용하시는 웹 호스팅 업체에서 PHP를 설치하면 GD 라이브러리를 활성화하지 않아 발생하는 문제입니다. 호스팅 업체에 문의해서 GD 라이브러를 지원하도록 하거나 호스팅 업체를 바꾸어야 해결이 가능합니다.

    • 겔롱 2008/02/27 12:51

      네..감사합니다..
      제가 GD라이브러리 활성화 시켜놓지 않았군요...ㅡ.ㅡ;;

  14. moonloveyou 2008/03/11 03:14

    에휴... 컴퓨터에 대해 아무것도 모르는 상태에서 오래전에 QAOS.com 일게되고 많은거 배웠는데 이제는 블로그란걸 해볼려고 합니다. -_-

    남들보다 늦게 시작하지만 그래도 마음먹어본것은 한번 해볼려고 도메인하고 웹호스팅도 바로바로 결제하고 했습니다. ^__^

    도아님의 offree.net 블로그가 택스트큐브 란것인걸 알고 택스트큐브 설명서도 수십번 읽어보고... (도아님 블로그를 모델로 열심히 만들어 볼려고~)

    느린인터넷으로 겨우 www.graychang.com 에 업로드 하고 설치도 했습니다.! (처음엔 설치도 몰라서 해매고..)

    웹호스팅 하드 용량이 제가 멀 잘못했는지 글하나 올렸는데 200MB 에서 벌써 20MB 썼다고 나오고...

    사진도 넘 커서 도아님이 만드신 플러그인 검색해서 이제 설치해 볼려고 합니다.

    블로그 남들처럼 이쁘게 하고싶은데 마음대로 안되네요. 전혀 지식이 없는 상태에서 혼자 할려니...

    하다가 막히면 도아님께 여쭤봐도 되죠? ^__^

    이 플러그인 잘 사용해보겠습니다.

    perm. |  mod/del. reply.
    • 도아 2008/03/11 07:19

      200M에 20M 사용으로 나오는 것은 정상입니다. 텍스트 큐브를 설치하면 그 정도 사용한 것으로 나옵니다. 다만 200M는 용량이 너무 적습니다. 또 초보자가 바로 적용하기 보다는 티스토리로 블로그를 경험해 보고 부족하다고 생각되면 설치형으로 가는 것이 더 좋습니다. 하드 200M면 하루 전송량도 얼마 되지 않을 것 같군요.

  15. noname 2008/06/17 21:19

    텍스트큐브 1.7.1(RC)로 업그레이드 후에 이 플러그인이 동작하지 않더군요.
    1.7에서 .htaccess 내용이 이전과 달리 바뀌었는데 이게 원인입니다.

    증상만 파악하고 아직 어떻게 고칠지 몰라 그냥 내버려두고 있는데 도아님 참고하시라고 흔적 남기고 갑니다.

    perm. |  mod/del. reply.
    • 도아 2008/06/18 06:24

      1.7로 업하면 그때 확인해 보도록 하겠습니다.

(옵션: 없으면 생략)

글을 올릴 때 [b], [i], [url], [img]와 같은 BBCode를 사용할 수 있습니다.