이미지를 새 창을 띄우지 않고 예쁘게 출력할 수 있는 Lightbox 플러그인입니다.
이런 형식으로 출력됩니다.
1. 플러그인을 받으신 후, 플러그인 디렉토리에 압축을 푸시고
2. lightbox 디렉토리의 lightbox_plus.js를 여셔서 맨 아랫부분의 이미지파일 경로들을 수정해줍니다.
-
http://homepage.com/tattertools/plugins/lightbox/images/loading.gif 와 같이
절대경로로 적어 주세요.
- 혹은
/tatter/plugins/lightbox/images/loading.gif 와 같이
상대주소로 적어주셔도 됩니다.
3. lightbox 디렉토리를 업로드합니다.
4. 관리자 로그인을 하신 후 스킨관리 -> 현재 사용하는 스킨 편집하기 에서 <head> 태그 안에
<link rel="stylesheet" href="http://homepage.com/tattertools/plugins/lightbox/lightbox.css">
<script type="text/javascript" src="http://homepage.com/tattertools/plugins/lightbox/lightbox_plus.js"></script>
와 같이 css와 js파일을
추가해줍니다.
- 혹은 파일의 주소를
/tatter/plugins/lightbox/lightbox.css 와 같이
상대주소로 적어주셔도 됩니다.
- 스킨 편집하기 또는 직접 skin.html파일의 <head> 태그 안에 넣으셔서 업로드하시면 됩니다. (직접 스킨파일을 수정하시면 스킨 교체시 다시 넣는 번거로움이 없습니다)
5. 환경설정 -> 플러그인 에서 플러그인을 켜 줍니다.
6. 그럼 큰 이미지를 클릭하면 새 창 대신 현재창에서 깔끔하게 이미지가 출력됩니다.
7. 이미지를 추가하실 때, 대체 텍스트(alt태그)에 글을 적어주시면 클릭시 이미지에 캡션으로 나타납니다.
8.

플러그인이 제대로 동작하게 된다면 위의 이미지처럼 lightbox를 수동으로 사용하실 수도 있습니다.
<a href="이미지 주소" rel="lightbox"><img title="캡션" src="이미지 주소" width="500" height="375" /></a>
이런 식으로 html 편집 모드에서 이미지를 추가하시면 됩니다.
9. 또한 꼭 이미지파일에 붙어있는 하이퍼링크가 아니더라도 라이트박스를 사용하실 수 있습니다.
오쟈마녀 어드벤쳐 ~ 비밀의 마법 ~ 스크린샷
<a href="이미지 주소" rel="lightbox" title="캡션">주절주절주절</a>
이런 식으로 추가하시면 됩니다.
10. 이미지 대체 텍스트 뒷편에 lightbox-effect 라고 넣어주시면..

체력회복!
클릭해보시면 아시겠지만 이런 효과를 줄 수 있도록 추가했습니다. (정확히 말하자면 원래 사용가능했었지만 말입니다)
혹은 위의 직접 링크방식 사용시에는 a 태그 속성에
class="effectable" 을 넣어주시면 됩니다.
효과글 이미지(zzoop.gif)를 원하는대로 수정해서 쓰시면 좋을 것입니다. (
lightbox plus 본가쪽에서는
조조 효과음표시 오마케도 있더군요 ..)
1.1.2 - 태터툴즈 클래식 이하의 버전에서 마이그레이션 한 데이터의 이미지파일의 경우 태그가 깨지는 현상을 수정했습니다.
1.1.1 - 다른 플러그인과의 예외발생 가능성이 있는 부분을 수정했습니다.
1.1 - 워니님과 박또님의 수정사항에 맞춰서 다중블로그 사용시의 문제, Exif 플러그인(기타 이미지 뒷부분에 추가를 하는 플러그인)과의 문제를 해결하였습니다.
또한 효과글 이미지 출력 기능이 사용가능하도록 하였습니다.
1. 플러그인을 깔았는데 이미지를 클릭하면 그냥 이미지만 출력됩니다.
-> 자바스크립트 파일(.js)의 경로가 잘못된 경우입니다. 스킨 파일의 head 태그 안에 js 파일의 경로가 제대로 되어있는지 확인해 주세요.
2. 이미지를 클릭하면 로딩 화면만 나옵니다.
-> 이전 버전의 플러그인 사용시 잘못된 경로 문제로 나타날 수 있는 문제입니다. 새 버전을 받으셔서 덮어씌어 보세요. 혹시 새 버전에서도 같은 문제가 일어난다면 이 포스팅이나 태터툴즈 플러그인란의 글에 알려주시면 감사하겠습니다.
3. 갤러리 기능에서는 동작하지 않나요?
-> 네, 동작하지 않습니다. 갤러리에서 동작하도록 하려면 갤러리 스크립트를 수정해야 합니다. 조만간 lightbox가 동작하는 수정된 갤러리 스크립트를 공개하도록 노력하겠습니다.
4. 확대된 이미지가 스킨에서 사용되는 레이어에 가려서 보기가 좋지 않습니다.
-> zindex의 숫자를 조절해주시면 됩니다. lightbox의 zindex값은 50~90사이이니 스킨파일의 zindex를 그 이하로 맞추시던지 lightbox_plus.js파일에서 zindex로 찾아서 나오는 값들을 전부 +100 정도로 주시면 됩니다.
5. 확대된 이미지에서 오른쪽 상단에 나오는 X마크를 지우고 싶습니다.
-> lightbox_plus.js의 맨 아래 이미지파일 경로에서 closeimg 부분을 비워두시면 됩니다.(closeimg:'' 와 같이)
6. 플래쉬 카운터 때문에 이미지가 가려집니다.
-> AcePilot님의 팁(
http://bismark.mireene.com/27)을 참조해 주세요.