javascript prototype lightbox 사용하기

1. lightbox2를 다운로드 받는다.
   
   http://www.huddletogether.com/projects/lightbox2/

2. html 파일에 아래의 자바스크립트 파일을 include 시킨다.

   <script type="text/javascript" src="js/prototype.js"></script>
   <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
   <script type="text/javascript" src="js/lightbox.js"></script>

3. css 스타일 시트를 include 시킨다.
  
   <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

4. rel="lightbox[roadtrip]" 부분을 추가시킨다. 

   <a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
   <a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
   <a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>

5. 결과 
  
   마우스로 오른쪽이나 왼쪽을 클릭 할 경우 넘어간다. 
   키보드로도 가능하다. 



                             http://jongjun.wo.tc/aa/