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