Moon Melody :: 태터툴즈 1.0용 플러그인 Lightbox TT MX 2.0 을 공개합니다.

~~※ 다운로드는 태터센터 플러그인란 - 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를 수동으로 사용하실 수도 있습니다.

이런 식으로 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