찬노군의 난장 Homepage XE

::: http://channo.kr - http://channo.pe.kr - http://channokun.com :::

아… 이 글에 앞서 솔직한거 하나 털어놓습니다. 사실 이 라이트박스때문에 이글루스로 갈까 아니면 텍스트큐브(태터툴즈의 최신버젼)로 다시 갈까… 하는 생각이 머릿속에서 떠나질 않았습니다. 라이트박스를 띄우면 일단 기존에는 그림 하나씩밖에 볼수밖에 없었어요. 게다가 이미지 사이즈가  모니터가 작으면 한번더 크기조정을 해서 봐야 합니다. 뭔가 리사이징이 대단해 보일지 어떤지는 모르겠지만 정말 아니올시다예요. 리사이징이 되서 또 리사이징을 클릭해야 되는건지 모르는사람들이 태반입니다. 근데, 이 기능을 안다 손쳐도 귀찮은건 어쩔수 없어요. 이미지가 찌그러지면 보는사람들은 "뭐 이래~?" 하면서 기냥 뚱하게 쳐다보고 닫아버립니다. 이미지(사진이건 그림이건)에 인생을 바친사람들에겐 상처가 될수밖에 없어요. 해서 저 이외에 다른 분들도 종종 티스토리 포럼에 건의해봤긴 했지만 이유가 무엇인지 묵묵무답이었습니다. 사정이 어떤지 전혀 모르므로 불만만 쌓여서는 어쩔까 계속 궁리하다가 한줄기의 빛이 빛췄나니…(…………)

바로 Lytebox v3.22 (07.10.02기준)입니다!

이 제  슬슬 기본으로 탑재되어 있는 라이트박스 플러그인을 버릴때가 왔어요!! 어흐륵흑거하ㅣㅁㄱㅔ;; 시나 이런 말씀하실껍니다. 저거 철자 틀렸잖여…라고요. 근데 이런 이름으로 발표 했던데요?;; 네, 그래요. 제작자의 존중을 취향해줍시다.(…영어로 뭐라 쏼라쏼라써놨는데 전 모르는 외계어일 뿐입니다.ㄳ)

하면… 어떻게 설치하느냐.

http://www.dolem.com/lytebox/index.htm


일단 위의 주소로 가서 다운로드 있는곳을 찾아 받으세요. 여기엔 업로드 하지 않겠습니다. 기간이 흘러 버젼업된걸 받는 그런것도 있겠지만 저작권은 존중해야죠~ :)

zip파일을 받으시면 압축 푸시고~ 내용안의

lytebox.css
lytebox.js

파 일을 수정하셔야 합니다. 자~ 그럼 수정~을 해야 할텐데 이제부터 설명이 다소 복잡할수 있으므로 신경써서 읽어주세요. 파일들은 티스토리 안에서 바꿀수 없으니 수정을 다 하시고 업로드해야 합니다. 고로 중간에 뭔가 수정하고 싶은 점이 있으면 또 수정해서 업로드 해야 합니다. 이점은 되게 귀찮은 점이지만 구닥다리 라이트박스 플러그인을 버리기 위해선 감수해야지요… llorz



자~ 일단 lytebox.js파일을 수정해봅시다.
메모장이나 기타 에디터로 파일을 오픈하시고 다 필요 없고 이 부분만 보세요. 다른 부분은 건드리지 마세요~ 자칫 잘못하면 프로그래밍이 엉켜서 돌이킬수 없게 됩니다. 소스내용을 어느정도 아시는 분만 손대시길 바랍니다.ㄱ-;

본격 설명 들어갑니다. 29줄에 이부분 보이시죠?
    /*** Start Global Configuration ***/


그리고 내용은 이렇게 51줄에 끝납니다.
    /*** End Slideshow Configuration ***/


이 가운데의 줄에 있는 내용들이 "설정"인데… 이 부분들을 입맛에 맞게 바꾸시는 겁니다.



this.theme = 'grey';
이건 라이트박스의 스킨컬러부분입니다. grey가 기본설정이고 red, green, blue, gold등의 설정이 있어요. 입맛대로 바꾸세요. 폰트와 외곽라인 버튼등의 색이 변합니다.

this.hideFlash = true;
이 건 이미지 한번 보여줄때마다 번쩍 터지는 부분을 담당하나 봅니다.(귀찮으니 자세히 안봤어요.) true가 숨기는거, false가 숨기지 않는겁니다. 솔직히 이 부분은 저사향 컴퓨터에게 은근히 지장을 줄수 있는 부분이니 왠만하면 true로 가는게 좋습니다.

this.outerBorder = true;
이 것은 이미지의 외곽선을 쳐주는것을 설정하는 부분입니다. 이미지를 좀더 두곽시킬수도 있고 이 부분을 빼고선 깔끔하게 나가게 할수도 있구요. 각자 취향에 맞게 바꿔주세요. true가 외곽선 친다는거고 false가 외곽선을 치지 않는겁니다.

this.resizeSpeed = 8;
이 미지 불러올때 리사이징 속도 부분입니다.(밑에 설정에 이부분을 보여줄것인지에 대한 설정이 따로 있으니 그건 그때 설명하겠습니다.) 1이 가장 느린쪽이고 10이 가장 빠른쪽입니다. 솔직한 심정으론 10도 느려요; ㄱ-;(똥컴터아닙니다. 저(…)) 저는 10쯤에 놨는데 각자 입맛에 맞추세요. 하지만 너무 느리면 방문객분들이 답답해 하시니 왠간해선 최대한 속도를 내는쪽으로 바꿔주세요.

this.maxOpacity = 80;
이건… 이미지 보여주는 외의 부분의 농도 설정입니다. 높을수록 블랙으로 보여지고 낮을수록 바탕에 보여지는 블로그의 모습이 보입니다. 이미지를 강조하시려면 75~90으로 설정하시고(100은 답답해 보일수 있습니다.) 그래도 나의 블로그는 글빨(…)이며 이미지는 보조일 뿐이다 싶으신 분들은 0~20사이로 설정해주세요.

this.navType = 1;
여러가지 이미지를 보여줄때, 다음이미지나 이전이미지를 어떻게 볼것이냐…에 대한 설정입니다. 이것은 기본이 1로 되어 있는데, 총 1,2중 하나를 설정하실수 있습니다. 1은 이미지를 딱 반으로 나누었을때 좌측을 클릭할경우 이전 이미지. 우측을 클릭할경우 다음 이미지를 보는 시스템이고, 2를 설정하시면 하단에 이미지 설명쪽에 이전 이미지이냐 다음 이미지이냐를 정하고 탭이 보여지는 시스템입니다. 솔직히 이건 이미지가 길어질 경우 다음 이미지를 보기 위해서 마구 스크롤 해서 다음 이미지를 넘기기 위해 클릭해서 보는건 매우 답답합니다. 물론 이미지가 작으면 편리할수도 있겠지만 전체적으로 생각했을때는 매번 작은 이미지만 나오란 법은 없으니 1을 선택하시는것이 방문자들에게 편의를 제공할 것입니다.

this.autoResize = false;
해상도/인터넷 브라우져 사이즈에 맞춰서 이미지가 보여지는 것입니다. 제가 이것때문에 되게 불만이었는데 기본이 true로 되어 있을겁니다. 저는 당연히 false로 했습니다. ㄱ-; 기본적으로 이미지가 블로그상에서 잘 보이지 않아서 클릭하여 풀사이즈로 보려고 한건데 이미지가 또 찌그러져 보인다니? 라고 생각하셨다면 false로 설정하시고~ 그래도 내 이미지는 설령 찌그러진다 하더라도 한눈에 전체적인것을 보여줄것이다 싶으시면 true로 설정해주세요.

this.doAnimations = true;
이것은 위에 리사이즈 스피드라고 있었죠? 그 부분을 보여줄것이냐 말것이냐를 설정하는 부분입니다. 나는 스르륵 보여지는것을 좋아한다 싶으시면 true로 설정하시고 아 빨랑 안나오네~ 답답해~! 싶으신 분들은 false로 설정해주세요.(이 경우, 당연히 아시겠지만 리사이즈 스피드에 대한 설정은 넘기는 것이겠죠?)

this.borderSize = 12;
위에 아웃터보더 라고 설정에 있었죠? 그것을 true로 설정할시 이 설정이 들어가는 것입니다. 기본은 12로 되어 있는데 너무 굵다 싶으시면 줄이세요. 12의 반절인 6사이즈도 추천합니다.

.
.
.
이제 기본적인 뷰어 설정은 끝났고 슬라이드 쇼 설정이 남았습니다.
슬 라이드 쇼는 자동으로 여러 이미지를 엮었을때 이미지가 자동으로 넘겨주면서 보여지는겁니다. (첫번째 이미지를 선택할경우 자동으로 play가 되지만 중간 이미지를 선택할경우엔 기본은 stop으로 되어 있는데 play를 클릭하여 자동으로 넘겨주는것으로 바꾸는 모드입니다.) 솔직히 이 부분은 사람에 따라 귀찮다고 느껴지게 보여질수 있으므로 편의를 제공한답시고 이 모드로 보여주는것은 위험할수도 있습니다. 사람에 따라선 어느 이미지는 계속 보고 싶은데 다음으로 넘어가면 뒤로 넘겨서 봐야 하므로 오히려 귀찮음을 유발시킬수 있습니다. 이점 주의하세요. 멈추게 하는 옵션은 있지만 이미지가 길 경우를 생각하면 밑으로 스크롤해서 클릭하는 등의 상황이 발생해 어느면에선 전혀 편의를 제공하는게 아님을 느끼실겁니다.

this.slideInterval  = 4000;
이 부분은 1000단위로 1초를 칩니다. 고로 기본4000이면 한 이미지당 "4초"에 한번씩 넘기는 방법입니다. 이건 몇이 적당하다를 추천 못해드리겠습니다. 이미지에 따라서 1초만 보면 되는 이미지가 있고 어느건 10초 이상 보고싶은 이미지가 있을수 있기 때문입니다.

this.showNavigation  = true;
위에 비슷한 설정이 있었죠? 이미지를 다음으로 넘길시에 보여지는것.…인데  슬라이드 쇼는 아무래도 자동으로 넘어가니 true를 권장합니다. false는 숨기는 쪽입니다.

this.showClose = true;
이것은 닫기버튼을 보여주냐 마냐를 선택하는 부분입니다. 닫는건 당연히 있어야 겠지요?; 물론 이미지 외의 부분을 클릭하면 이미지를 닫을수는 있지만 초보 사용자들은 당황해할수 있습니다. true는 보여줌, false는 숨김입니다.

this.showDetails = true;
설명부분을 보여줄것이냐 말것이냐 입니다. 이미지마다 설명을 넣었는데 false로 설정하면 보이지 않으므로 true로 해줍시다. 물론 설명이 필요없다 싶으신 분들은 false로 설정해주세요.

this.showPlayPause = true;
자 동으로 넘길때 플레이 버튼을 활용 할것이냐 말것이냐를 설정하는 부분입니다. 슬라이드쇼를 사용하시려면 당연히 있어야 겠지요? 멈춰놓고 보고싶은 이미지가 있을수 있을테니까 말이죠. true는 보여주는것이고 false는 숨기는것입니다.

this.autoEnd = true;
마지막 이미지를 보여줄 경우에 적용되는 것인데 마지막 이미지를 정해놓은 시간까지 다 보여줬다면 자동으로 닫을것이냐에 대한 설정입니다. 기본은 true로 자동으로 닫는것이고 false는 자동닫기를 실행하지 않는쪽입니다.

this.pauseOnNextClick    = false;
멈췄을대 다음을 넘기는 버튼을 활성화 할것이냐에 대한 설정입니다. 기본이 false인데 상식적으로 다음 이미지로 넘기고 싶은데 멈춰놓고 넘기지는 않습니다. 그냥 다음으로 넘기죠…ㄱ-; 거두 절미하고 false로 해놓읍시다.

this.pauseOnPrevClick     = true;   
바로 위와 반대일 경우 입니다. 멈춰놓고 이전 이미지를 볼것이냐에 대한 설정입니다. 이전 이미지에 대한 여운이 있다면 당연히 멈춰놓고 좀더 감상하기 위해 뒤로 돌려서 보겠지요?;
이건 그대로 true로 설정합시다.


휴… 겨우겨우 다 설명했는데;; 사실 이렇게 주절주절 써 놓았지만 막상 설정하려 하면 대충 다 느낌이 오실겁니다. 어려워 하지 마시고 그냥 설정해 보세요 :)


이제 저장하시고 이제 css부분을 설정할때가 왔습니다.
lytebox.css파일을 메모장이나 기타 에디터로 오픈해주세요.


보시면 또 정신없게 주절주절 써 있는데~ 다른거 건드리지 말고 이미지 파일명들을 주목해주세요. 그것들의 경로들을 고치는것인데… 이건 솔직히 일일히 바꾸는건 답답하니까 빨리 수정하기 위해 팁을 활용합시다.

메모장이라면 ctrl+h를 눌러서 명령창 하나를 띄웁니다. 그러면 "바꾸기"가 나오는데 여기에 찾을 내용쪽에

url(

라고 입력해주세요. 그 다음에 바꿀내용쪽에는

url(자신이 업로드할 이미지 경로

를 입력해주세요. 그런데! 잠깐만요. 여기에서 중요한게 있어요. "자신이 업로드할 이미지 경로"이게 중요한데 정확히 알아야 합니다. 이 경로를 알기 위해서는~ 일단 잠깐 인터넷 브라우져를 여세요. 자신의 티스토리 센터로 들어간 다음~

"스킨 -> 직접 올리기"

로 이동후에 다운받았던 lytebox폴더에 있는 images폴더에 있는 이미지들을 한꺼번에 업로드해 주세요. 그러면 파일명 리스트에 자신이 업로드한 파일들의 리스트들이 나옵니다. 그때 방금 올렸던 이미지의 파일명을 아무거나 하나 클릭해보세요. 그러면 섬네일로 이미지가 보이죠? 거기에서 "마우스 오른쪽 클릭"하시고 속성을 클릭하여 이미지 주소를 복사합니다. 그 다음 인터넷 브라우져 하나 더 키고 그 복사한 이미지 주소를 "주소창"에 넣어주세요. 그러면 로그인 화면이 뜹니다. 그곳에서 다시 로그인 하면 화면이 전환되면서 주소창에 그 이미지의 실제 주소가 나옵니다. 그 주소를 복사해두는 것입니다. 대충 이런식으로 나오죠?

http://cfs.tistory.com/custom/blog/3/22843/skin/images/abcd.gif

이것에서 파일명까지가 아닌

http://cfs.tistory.com/custom/blog/3/22843/skin/images/

여기까지만 주소를 복사하세요. 그 후에~  메모장으로 가셔서  "자신이 업로드할 이미지 경로"를 넣으세요. 그러니까 다시 정리해서 예를 들자면 이렇게 하시면 됩니다.


찾을내용(N) : url(

바꿀내용(P) : url(http://cfs.tistory.com/custom/blog/3/22843/skin/images/


이렇게  하고선 "모두바꾸기(A)"를 클릭하시면 됩니다. 여기에서 주의할점은 저 주소의 마지막엔 공백이 있으면 안됩니다. 공백이 있는지 확인 하시고 모두바꾸기를 클릭해주세요.

그렇게 하면 노가다 할꺼 없이 쉽게 모두 경로가 자동으로 바뀝니다~


저 장하시고~ 이렇게 수정 한 다음에 그 바꿀내용에 복사 했었던 주소를 다른곳(메모장 하나 더 열어두신다든지)에 복사해 두세요. 그 다음에 lytebox.js파일을 이미지 올렸던곳 있죠? 그 곳에 업로드를 해주세요. lytebox.css는 일단 저장만 하시고 창은 닫지 마시고 그대로 두세요.

그 다음에 스킨을 뜯어 고치는 시간이 다가 왔습니다. 사실 고칠것은 얼마 없어요.

자 스킨 수정하는곳에 skin.html쪽을 보시면~
스크립트가 있는 부분이 있을겁니다.
＜script type="text/javascript"＞
그 라인 부분의 바로 윗쪽 라인에 이런식으로 넣어 주세요.


＜script type="text/javascript" language="javascript" src="http://cfs.tistory.com/custom/blog/3/22843/skin/images/lytebox.js"＞ ＜/script＞

귀찮으시면 위의 줄을 복사해서 쓰세요.
보시면 아시겠지만 일단 "<" 나 ">"요건 태그가 먹히는 관계로 특수문자로 대처 했으니 보통 문자로 바꾸시고 저 http://cfs.tistory.com/custom/blog/3/22843/skin/images/ 이 부분은 자신의 티스토리 주소로 바꾸세요.

그러시면 일단 기본은 완성 되었구요. 이제 바로 밑의 항목인 style.css부분을 바꾸시면 됩니다. 아까 lytebox.css파일을 바꿨었는데 그것을 통채로 복사해두신 후에 그 붙여넣을곳을 찾는것입니다. 자~ 적당한 곳을 찾습니다.

대충 /* 기본적인 스타일 */ 이라고 되어 있는곳 쯤을 찾습니다.(이것은 스킨마다 다~ 다르니 대강 비슷해 보이는 부분을 찾아주세요.)

그 밑에 뭐라 써져 있는데 그 기본적인 스타일의 항목이 끝나는 곳 다음줄에 엔터쳐서 공백라인을 띄우시고

/* 라이트박스 */

라고 입력하신 후에 아까 수정했었던 lytebox.css의 내용을 통채로 복사하셔서 이 곳 style.css의 적당한 위치에 붙여 넣습니다. 그러면 1차적인것은 완료가 된 것입니다.

사 실 이 lytebox.css의 내용을 이 style.css에 무식하게 붙여 넣을게 아니라 skin.html에 이 lytebox.css를 불러오면 쉽게 해결되는 부분이긴 한데 좀더 직관적으로 잘 되길 바라는 마음에서 아예 붙여 넣게 되었습니다.(사실 귀찮음 쫌 많아씀(…)) 불러오실 분들(불르는 명령어를 아시는 분들)은 불러오는 쪽으로 해결하셔도 됩니다. :)


이제 설치 설명은 대강 끝났구요. 이렇게 하면 보다 업그레이드된 라이트박스를 사용할수 있는 상황이 되었습니다.

* 주의사항이 하나 있습니다. 어느 스킨에 따라서 이미지가 클 경우 스크롤바가 안통하는 경우가 있습니다. 그것은 스킨문제인것이니 저한테 물어보셔도 해결이 안될겁니다;;(결론은 돌팔이란 뜻) 저도 큰 이미지 오픈시 스크롤이 안되는 스킨을 접해서 억지로 잠 쪼개가면서 바꾸게 되었네요. llorz

이제 사용하시면 되고 사용시의 문제는 "귀찮음 극복"이 되겠습니다.(…)



일단 이것을 사용할때 단점을 앞서 말한것에 추가적으로 말씀드리자면,

라 이트 박스를 쓰고 싶으면 일일히 html 태그모드로 전환하셔서 바꾸셔야 합니다. a태그로 링크를 걸어 오픈하게 되는건데 기존 티스토리 플러그인에선 그냥 알아서 리사이징이 필요한 이미지는 자동으로 a태그로 링크를 걸어 줬지만 이것을 사용하게 되면 수동으로 a태그링크를 걸어줘야 한다는 뜻입니다. llorz

또한 이 이미지가 좀 뭐랄까 대괄호에 이런저런 내용으로 나오는데 그것을 그대로 a태그로 링크걸면 당연히 안나옵니다. llorz 그 이미지의 주소를 찾아야 하죠. 이미지 찾는 법은 이미지를 일단 티스토리 에디터상에 띄우신후에 미리보기에서 마우스 오른쪽키 눌러서 속성을 클릭후에 주소를 복사하셔서 그 주소를 a태그로 연결시켜야 합니다.(티스토리의 이미지는 .jpg .png .bmp 이렇게 끝나지 않습니다. 그러니 나오는 주소 그대로를 복사해서 쓰시면 됩니다.)

하지만 이것을 극복할만한 장점이 있는건 앞서 말한 이미지 넘김등이 있고 2차 리사이징 없애는 것도 가능하고요.  또 하나 있습니다. 링크 주소를 라이트박스로 띄울수 있어요!

고로 새창을 띄우지 않고 창 한개로 보여주게 하는것입니다. 이건 참 무지 맘에 드는 점인데… 이것에도 단점이 있으니… 그것은 바로…

고정사이즈만 가능하다는 겁니다. llorz

사이즈를 지정할수 있게 되는데, 그 사이즈에서 드래그하여 크기를 늘리거나 하는걸 못합니다. llorz 그러므로 조금의 계산은 하셔야 할것입니다. 주의해주세요. :)


자 이제 글 작성시에 사용 법을 알려드리겠습니다.


<a href="링크주소" rel="lytebox" title="이미지 내용">이미지 보기</a>


이렇게 하면 "기본 텍스트 링크"로써 보실 수 있습니다. 이미지를 띄운 상태에서 하는 방법은 이렇게 저 "이미지 보기"쪽에 이미지 태그인 img태그를 넣으셔서 띄우시면 되겠지요?

<a href="링크주소" rel="lytebox" title="이미지 내용"><img src="이미지링크주소" border="0"></a>

 
꼭 주의할점은 "rel="lytebox""를 꼭 넣으셔야 한다는 겁니다. 안 넣으면 작동 안하므로 주의해주세요. :)

이미지를 한꺼번에 보여주려면?
<a href="링크주소" rel="lytebox[12]" title="이미지 내용">이미지보기</a>
<a href="링크주소" rel="lytebox[12]" title="이미지 내용">이미지보기2</a>

이렇게 하시면 두 이미지가 포함되어서 보여지게 됩니다. 이것도 앞서 설명한바와 같이 중간에 img태그를 통해서 이미지를 먼저 보여줄수도 있구요.



슬라이드쇼를 구현하시려면 "rel="lyteshow[아무거나]"" 를 하시고 슬라이드쇼 안에 넣으실 이미지들의 "rel"명을 저 이름과 똑같이 적는겁니다. 예를 들면~

<a href="링크주소1" rel="lyteshow[123]" title="이미지 내용">이미지 보기</a>
<a href="링크주소2" rel="lyteshow[123]" title="이미지 내용">이미지 보기2</a>
<a href="링크주소3" rel="lyteshow[123]" title="이미지 내용">이미지 보기3</a>


이렇게 넣으시면 3개의 이미지가 같이 슬라이드쇼에 포함되어져서 나오게 됩니다. 10개건 100개건 가능하니 계속 연결하시면 됩니다. 팁으로는

<a href="링크주소1" rel="lyteshow[123]" title="이미지 내용">이미지 보기</a>
<a href="링크주소2" rel="lyteshow[123]" title="이미지 내용"></a>
<a href="링크주소3" rel="lyteshow[123]" title="이미지 내용"></a>

이렇게 하면 이미지보기를 클릭해야 다음다음 이미지를 차례대로 볼수 있게 됩니다. 이건 바로 이전에 보여줬던 그냥 라이트박스 여러이미지 보여주기도 같이 포함되는 내용입니다.:)
단 지 티스토리의 위지윅에디터가 버그가 있는데 그것은 a태그 사이에 링크걸 문자가 아무런 내용이 없을때는 그 a태그를 아예 없애버린다는겁니다; html모드일때는 괜찮은데 말이죠 llorz  혹여나 재차 수정할꺼같은 포스팅이라면 그냥 아쉬운대로 특수문자의 공백으로 처리해두세요.(키보드의 "ㄱ"자를 누른다음 "한자"키를 누른후 1번입니다.)


그렇다면 라이트박스로 주소를 링크걸어 보여주는건?
<a href="http://www.google.com" rel="lyteframe" title="Search Google" rev="width: 400px; height: 300px; scrolling: no;">Google Search</a>

이런식으로 넣어 주시면 됩니다. 보시다시피 아이프레임 구현이긴 하지만 꽤 깔끔하게 구현되므로 차라리 아이프레임을 쓰는것보다 미적으로는 더 효용성이 있을지도 모르겠네요. :)
"rel ="lyteframe""을 꼭 넣으셔야 하며 "rev"명령어는 보여질 사이즈나 설정을 할수 있는 부분입니다. scrolling은 라이트박스 안의 스크롤바를 설정하는 것으로 왠만하면 이 명령어는 빼세요. scrolling: no; 라고 설정하시면 라이트박스 안에 스크롤바가 나오지 않습니다. 사이즈는 꼭 넣어주시고요. 안 넣으면 최적의 강제설정이 되서 답답해 보일 우려가 있습니다.;



여기에도 항목으로 싸잡아서 설정할수 있는데요~

rel="lyteframe[아무거나]"

이렇게 넣으시면 페이지를 넘기면서 보여줄수 있습니다. 그외의 방법은 앞에 이미지를 띄우듯이 똑같이 하시면 됩니다. 다만 rev쪽만 다르게 설정하시면 됩니다. :)