jQuery) lightBox를 사용한 갤러리

사진 갤러리를 보여주는 방법중에서 가장 많이 쓰이는 기술 중 하나는 웹 페이지를 흐릿하게 만들고 브라우저 창에 썸네일의 큰 이미지를 보여주는 것이다. lightBox라는 자바스크립트 프로그램은 이 방법을 사용하는 프로그램 중 가장 널리 알려져 있다.(http://www.huddletogether.com/projects/lightbox2)
jQuery 환경에서 동작하는 스크립트도 있다.
http://leandrovieira.com/projects/jquery/lightbox/     <- 이곳에서 다운 받을 수 있다. 예제도 볼 수 있는데 정말 멋지고 예쁘다.

사용하는 방법은 홈페이지에도 있지만
간단하게 설명하면
1. 갤러리 페이지를 만든다. (갤러리 사진 링크들을 gallery 같은 특정한 아이디를 부여한 <div> 태그로 감싸서 '#gallery a'와 같은 선택자를 사용해서 선택할 수 있다.)
2. jQuery lightBox 파일을 다운로드받고, 사이트에 추가한다.
3. 페이지에 외부 스타일 시트 파일을 추가한다.
4. 자바스크립트 파일을 추가한다. (jQuery lightBox는 jQuery라이브러리를 사용하기 때문에, jQuery 파일을 페이지에 추가해야 한다.)
5. <script> 태그를 추가하고 jQuery ready 함수를 사용해 lightBox를 호출한다.

<script type="text/javascript">
$(document).ready(function(){

$('#gallery a').lightBox();

});
</script>

light Box 옵션에도 여러가지가 있다. http://leandrovieira.com/projects/jquery/lightbox/ 사이트에서 Extend를 가면 볼 수 있다.

* 이미지를 읽어들일 때, 로딩중 을 알리는 아이콘을 만들때 유용한 사이트! http://www.ajaxload.info/  다운받아 유용하게 사용할 수 있을 것 같다.