인터넷 서핑 도중 알게 된 상당히 심플하고, 멋진 방법으로 전체 크기의 이미지를 보여주는 자바 스크립트.
Tattertools에도 플러그인 형태로 제공되고 있으며, 여타 갤러리 프로그램에서도 광범위하게 사용되고 있는 방법.
자바 스크립트답게 적용 방법도 상당히 간단하고, 파어이폭스 등 여타 브라우저에서도 잘 동작한다.

아래의 그림을 클릭하면 lightbox의 효과를 볼 수 있다.

lightbox 관련 홈페이지는 http://www.huddletogether.com/projects/lightbox/

설치 방법

1. 위의 홈페이지에서 lightbox.js를 내려받는다.

2. html의 header 부분에 다음을 추가한다.

<script type="text/javascript" src="lightbox.js"></script>

3. css에 다음을 추가한다.

#lightbox{
background-color:#eee;
padding: 10px;
border-bottom: 2px solid #666;
border-right: 2px solid #666;
}
#lightboxDetails{
font-size: 0.8em;
padding-top: 0.4em;
}
#lightboxCaption{ float: left; }
#keyboardMsg{ float: right; }

#lightbox img{ border: none; }
#overlay img{ border: none; }

zog의 경우에는 해당 스킨 파일의 index.html과 sylesheet.css 파일을 수정하면 된다.

사용방법

1. 이미지에 다음과 같이 rel="lightbox" 을 추가한다.

<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>