Lightbox2 적용 방법

Lightbox 는 사진 감상시 놀라운 효과를 나타낼수 있도록 도와주는 자바스크립트 라이브러리 입니다.
외국에서 제작된 것으로 링크1 을 클릭하시면 제작자 홈페이를 방문하실 수 있습니다.
Lightbox 를 프로그램에 적용하는 것은 메뉴얼에 나와있는 것처럼 매우 쉽습니다.
최근에 Lightbox 에 이어 Lightbox2 가 출시되었고 이 문서는 이에 대하여 설명합니다.
(Lightbox2 의 저작권은 Creative Commons Attribution 2.5 License 를 따르고 있다고 제작자 홈페이지에 나와있습니다.)

우선 위에 첨부파일을 다운로드 합니다.
Lightbox2 를 적용할 계정에 업로드하고 적용할 페이지에 스크립트 코드를 삽입합니다.
이때 js/ 디렉토리는 자신의 경우에 맞게 수정하셔야 합니다.

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

이로써 Lightbox2 를 적용할 준비는 완료되었습니다.
Lightbox2 의 효과를 나타낼 이미지를 다음과 같이 링크하기만 하면됩니다.

<a href="images/image-1.jpg" rel="lightbox"><img src="images/thumbnail-1.jpg"></a>
<a href="images/image-2.jpg" rel="lightbox"><img src="images/thumbnail-2.jpg"></a>
<a href="images/image-3.jpg" rel="lightbox"><img src="images/thumbnail-3.jpg"></a>

경로나 파일명은 자신에게 맞게 수정하여야 한다는 것을 잊지마세요.

Lightbox2 를 적용한 스킨을 참고하세요. [바로가기]
[이 게시물은 관리자님에 의해 2011-10-31 17:16:08 PHP & HTML에서 이동 됨]

첨부파일

lightbox2.03.3.zip (72.3 KB) 67회 2007-08-28 13:08
|

댓글 2개

이미지에서 next prev 링크를 표시할려면 rel="lightbox[]" 와 같이 [] 를 붙이면 됩니다.
18년 전
플레쉬 효과가 잇는 이미지 팝업창
댓글을 작성하시려면 로그인이 필요합니다. 로그인

개발자팁

개발과 관련된 유용한 정보를 공유하세요. 질문은 QA에서 해주시기 바랍니다.

+
분류 제목 글쓴이 날짜 조회
기타 18년 전 조회 2,442
MySQL 18년 전 조회 3,947
JavaScript 18년 전 조회 5,382
MySQL 18년 전 조회 3,712
기타 18년 전 조회 3,836
Linux 18년 전 조회 5,984
MySQL 18년 전 조회 5,018
JavaScript 18년 전 조회 3,812
기타 18년 전 조회 3,192
JavaScript 18년 전 조회 3,568
Linux 18년 전 조회 4,233
JavaScript 18년 전 조회 3,455
기타 18년 전 조회 3,540
Flash 18년 전 조회 3,826
JavaScript 18년 전 조회 4,084
기타 18년 전 조회 3,591
기타
[기타]
18년 전 조회 4,774
기타 18년 전 조회 3,010
기타 18년 전 조회 5,113
기타 18년 전 조회 2,943
MySQL 18년 전 조회 7,106
기타 18년 전 조회 2,902
기타 18년 전 조회 3,297
JavaScript
[JavaScript]
18년 전 조회 4,891
기타 18년 전 조회 2,683
MySQL 18년 전 조회 3,385
JavaScript 18년 전 조회 6,158
JavaScript 18년 전 조회 5,840
기타 18년 전 조회 4,904
기타 18년 전 조회 4,593
🐛 버그신고