Lightbox2의 설정 방법에 대해 자세히 설명 한 글이 없는듯 해서 한번 자세히 설명하고자 합니다.

저도 깊이는 모르고 설정 방법에 대해서만 이야기 하겠습니다.

혹 잘못된 설정 방법이나 더좋은 방법이 있으신분은 지적 부탁드립니다.

먼저 사이트에서 라이트 박스를 다운로드 하세요.

http://www.lokeshdhakar.com/projects/lightbox2/#download

위의 링크에서 디스크 모양 누르시면 다운로드 됩니다..ㅋㅋ

압축을 해제 하시면 css, images, js 이렇게 3개의 폴더와 index.html 파일이 있습니다.

index.html 파일은 Lightbox2 에대한 설정 방법이 적혀 있습니다.

물론 영문입니다..ㅠ.ㅜ(저와 더불어 대략 남감 하신분들 계심니다..)

내용은 아래와 같습니다.

================================  index.html ================================

Part 1 - Setup

1. Lightbox v2.0 uses the Prototype Framework and Scriptaculous Effects Library. You will need to include these three Javascript files in your header.

   <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>
   

2. Include the Lightbox CSS file (or append your active stylesheet with the Lightbox styles).

   <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
   

3. Check the CSS and make sure the referenced prevlabel.gif and nextlabel.gif files are in the right location. Also, make sure the loading.gif and closelabel.gif files as referenced near the top of the lightbox.js file are in the right location.

Part 2 - Activate

1. Add a rel="lightbox" attribute to any link tag to activate the lightbox. For example:

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

   Optional: Use the title attribute if you want to show a caption.
2. If you have a set of related images that you would like to group, follow step one but additionally include a group name between square brackets in the rel attribute. For example:

   <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>
   

   No limits to the number of image sets per page or how many images are allowed in each set. Go nuts!

================================  index.html ================================

설정과 링크방법 설명에 앞서 Lightbox2 파일을 어디에 업로드 할것인가를 결정합니다.

전 그누 폴더 안에 lightbox 폴더를 만들어 css, images, js 폴더를 업로드 하였습니다.
 
최신글 스킨에도 적용하기 위해서 입니다.

그럼 위 설정과 링크 방벙에 대한 설명입니다.


파트1 설정

1. Lightbox2를 사용하고자 하는 페이지 내에서 아래 3개의 js 파일을 불러 옵니다.

<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>

게시판(bbs)에서 사용하실꺼라면 3개의 파일을 상대 경로로 불러주세요

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

<?=g4[path]?>/lightbox/js...... 이런 거 되네요..^^


2. 그 다음으로 lightbox.css 파일을 불러오라고 합니다.

<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

요거또한 마찬가지로 bbs 폴더 기준으로 상대경로를 지정하세요.

<link rel="stylesheet" href="../lightbox/css/lightbox.css" type="text/css" media="screen" />

요기도 <?=g4[path]?>/lightbox/css...... 이런 거 되네요..^^


3. lightbox.css 파일에서  prevlabel.gif 와  nextlabel.gif 의 이미지 경로를 수정하라고

   합니다. 경로가 변한게 없으므로 수정할필요가 없습니다.

   만약 손대셔야 한다면 lightbox.css 파일 16줄과 17줄에 있으면 lightbox.css 파일기준으로

   상대 경로 로 지정하세요.(해깔리시는 분들은 절대 경로로)

   다음으로 lightbox.js 파일에 있는 loading.gif 와 closelabel.gif 의 이미지 
   
   경로를 수정하하고 합니다.  원본 lightbox.js 파일 49줄 50줄 은 아래와 같습니다.

    fileLoadingImage:        'images/loading.gif',    
    fileBottomNavCloseImage: 'images/closelabel.gif',

   요걸 아래와 같이 수정해주세요.

    fileLoadingImage:             g4_path+'/lightbox/images/loading.gif',    
    fileBottomNavCloseImage:  g4_path+'/lightbox/images/closelabel.gif',

   여기까지가 원문에서 요구하는 설정 부분인듯 합니다..ㅋㅋ



파트2 링크

기능은 단일창으로서 클릭시 창 닫기 와 모든 이미지를 이전 다음 클릭으로 볼수 있는기능 2가지가 있습니다.

1. 기능2가지중 첫번째 단일창으로서 클릭시 이미지를 보여주며 다시 클릭하면 창이 닫힙니다.
   이 기능은 보여줄 이미지가 1개일때 사용하면 좋을것 같습니다.

   <a href="보여줄이미지주소" rel="lightbox" title="제목">이미지</a>

2. 두번째 기능입니다. 클릭시 이전 다음 버튼을 클릭하여 링크되어 진 모든 이미지를 보여줍니다.
   이기능은 이미지가 여러개일때 사용하면 좋을듯 합니다.

   <a href="보여줄이미지주소 #1" rel="lightbox[roadtrip]" title="제목 #1">이미지 #1</a>
   <a href="보여줄이미지주소 #2" rel="lightbox[roadtrip]" title="제목 #2">이미지 #2</a>
   <a href="보여줄이미지주소 #3" rel="lightbox[roadtrip]" title="제목 #3">이미지 #3</a>
   <a href="보여줄이미지주소 #4" rel="lightbox[roadtrip]" title="제목 #4">이미지 #4</a>

  roadtrip 요건 빼셔도 무방합니다. 허나 이것이 무엇이 쓰이는지는 모르겠습니다.

여기까지가 lightbox2 설정및 링크 방법이였습니다...^^

잘못된점 있으면 정정부탁드립니다..^^

[ 추가분 roadtrip 에 대하여 ]

roadtrip 요건 구룹 이름인듯 합니다.

   <a href="보여줄이미지주소 #1" rel="lightbox[view]" title="제목 #1">이미지 #1</a>
   <a href="보여줄이미지주소 #2" rel="lightbox[view]" title="제목 #2">이미지 #2</a>

   <a href="보여줄이미지주소 #3" rel="lightbox[list]" title="제목 #3">이미지 #3</a>
   <a href="보여줄이미지주소 #4" rel="lightbox[list]" title="제목 #4">이미지 #4</a>

내용에서 목록보리를 체크 하였을시 내용의 이미지와 리스트의 이미지를 분리하여 보여줄수 있습니다.