Lightbox JS

인터넷 서핑 도중 알게 된 상당히 심플하고, 멋진 방법으로 전체 크기의 이미지를 보여주는 자바 스크립트.
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>

댓글 남기기

이메일은 공개되지 않습니다. 필수 입력창은 * 로 표시되어 있습니다