블로그 이전했습니다 : http://mya.moonmelody.com

Posted
Filed under 텍스트큐브(태터툴즈) 플러그인/Lightbox

※ 다운로드는 태터센터 플러그인란 - http://www.tattertools.com/ko/bbs/view.php?id=plugin&no=232 에서 가능합니다.

Lightbox TT MX는 Lightbox JS 1.0, Lightbox Plus, Lightbox JS 2.0 을 태터툴즈에서 간단하게 작동되도록 적용시켜주는 플러그인입니다.
Lightbox TT MX는 Lightbox TT EX의 버전업 플러그인 입니다.

Lightbox TT EX : http://mahodou.pe.kr/tt/entry/태터툴즈-10용-플러그인-Lightbox-TT-EX를-공개합니다
Lightbox TT : http://mahodou.pe.kr/tt/entry/태터툴즈-10용-Lightbox-플러그인

혹시라도 텍스트큐브용 Lightbox 플러그인을 사용하실 분이라면 http://moonmelody.com/tt/entry/LightboxTTAZmanualNqna 를 참고 바랍니다.

별로 업데이트를 많이 할 필요도 없는 플러그인인데 어쩌다보니 또 내놓는군요.
어쨌든 또 나왔습니다. 기본적으로 EX 버전의 스탠드얼론 중심에 각종 설정 가능한 부분을 따로 설정 파일로 분리했으며, Lightbox JS 1.0, 2.0을 지원하도록 추가하였습니다.


설치 방법 :

1. 플러그인을 받으신 후, 플러그인 디렉토리에 압축을 풀어주세요.
  혹, 스킨 파일을 고쳐야하는 이전 버전을 사용하시고 계시다면 추가한 js, css파일의 주소를 지워주세요.

2. 환경설정 -> 플러그인 메뉴에서 Lightbox TT MX 플러그인을 켜 줍니다.

3. 그럼 줄여진 큰 이미지를 클릭하면 새 창 대신 현재 창에서 출력됩니다.

여기까지가 기본적인 설치방법입니다. 간단하죠?
다음은 이미지 갤러리에 Lightbox를 적용시키는 방법입니다만.. 원본 갤러리 스크립트를 고쳐서 사용하는 것이기 때문에 예상치 못한 문제가 발생할 수 있습니다. 이점 유의해주세요.

4. Lightbox TT 플러그인에 있는 gallary.js 파일을 태터툴즈/script/ 폴더로 옮깁니다. (덮어씌우기 전에 원래 파일을 백업하세요!)

5. Lightbox TT 플러그인이 켜진 상태에서 이미지 갤러리를 클릭해보면 Lightbox가 동작합니다.

주의사항 : gallary.js를 덮어씌운 후에는 꼭 Lightbox 플러그인을 켜 주세요. Lightbox 플러그인을 해제했을 경우에는 백업해둔 gallery.js 파일로 다시 복원시켜주세요.

플러그인의 설정을 변경하고 싶으시면 lightboxtt_setting.php파일을, CSS 출력을 변경하고 싶으시면 lightboxtt_css.php 파일을 수정하시면 됩니다.


사용 방법 :

1. 기본적으로 이미지를 추가하실 때, 대체 텍스트(alt 태그)에 글을 적어주시면 클릭시 이미지에 캡션으로 나타납니다.

2.

플러그인이 제대로 동작하게 된다면 위의 이미지처럼 lightbox를 수동으로 사용하실 수도 있습니다.
<a href="이미지 주소" rel="lightbox" title="캡션"><img title="캡션" src="이미지 주소" width="500" height="375" /></a>

이런 식으로 html 편집 모드에서 이미지를 추가하시면 됩니다.

3. 또한 꼭 이미지파일에 붙어있는 하이퍼링크가 아니더라도 라이트박스를 사용하실 수 있습니다.
오쟈마녀 어드벤쳐 ~ 비밀의 마법 ~ 스크린샷


<a href="이미지 주소" rel="lightbox" title="캡션">주절주절주절</a>

이런 식으로 추가하시면 됩니다.

4. Lightbox JS 2.0 을 사용하도록 설정하셨을 때에는, 그룹별로 갤러리 이미지 효과를 낼 수도 있습니다.

[라이트박스]

그림의 왼쪽 오른쪽에 마우스 커서를 위치시키면 이와 같이 표시됩니다.

이미지 그룹 설정은, 이미지 대체 텍스트 입력시, 맨 마지막 부분에 [그룹명] 과 같이 입력하시면 됩니다.
ex) 이것은 좋은 것이다. [선물]
물론 같은 그룹으로 하고 싶은 이미지에 모두 추가하셔야 되겠죠?
그룹으로 열린 Lightbox JS에서는 N키와 P키를 사용하실 수 있습니다.

5. Lightbox Plus를 사용하도록 설정하셨을 시에 이미지 대체 텍스트 뒷편에 lightbox-effect 라고 적어넣어주시면..

일명 죠죠효과 [라이트박스]

이와 같은 효과를 넣을 수 있습니다.


혹은 위의 직접 링크방식 사용시에는 a 태그 속성에 class="effectable" 을 넣어주시면 됩니다.
효과글 이미지(zzoop.gif)를 원하는대로 수정해서 쓰시면 좋을 것입니다.



본 플러그인은 Lightbox JS 1.0, Lightbox Plus, Lightbox JS 2.0 의 스크립트와 그 외 이미지, CSS파일들을 포함하고 있습니다.
본 플러그인의 저작권은 Lightbox JS 1.0, Lightbox Plus, Lightbox JS 2.0 스크립트의 라이센스와 같이 Creative Commons Attribution 2.5 라이센스를 따릅니다.


Lightbox JS: Fullsize Image Overlays
by Lokesh Dhakar - http://www.huddletogether.com

Lightbox v2.02
by Lokesh Dhakar - http://www.huddletogether.com

Lightbox Plus - Copyright (C) 2006 Takuya Otani/SimpleBoxes - http://serennz.cool.ne.jp/sb/
Copyright (C) 2006 SerendipityNZ - http://serennz.cool.ne.jp/snz/
2006/07/16 20:14 2006/07/16 20:14
[로그인][오픈아이디란?]
오픈아이디로만 댓글을 남길 수 있습니다