테스트 사이트 - 개발 중인 베타 버전입니다

Lightbox2 적용 방법

· 18년 전 · 2237 · 2
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에서 이동 됨]

댓글 작성

댓글을 작성하시려면 로그인이 필요합니다.

로그인하기

댓글 2개

18년 전
이미지에서 next prev 링크를 표시할려면 rel="lightbox[]" 와 같이 [] 를 붙이면 됩니다.
무식해서귀여운남자
18년 전
플레쉬 효과가 잇는 이미지 팝업창

게시글 목록

번호 제목
12201
12200
29244
12196
29243
12188
12184
29231
29230
12181
기타 툴팁 2
29229
12179
12177
12173
29226
12172
25007
12171
12170
29225
12167
12166
12157
12154
12153
25002
12151
29224
12148
29223
12142
29217
12141
12136
12132
12130
29216
29215
12126
12124
12122
12120
12111
25001
25000
24999
24998
24997
24994
24985
12109
12105
12104
12096
12094
12091
12090
12079
29211
12072
29210
12070
29207
12067
12061
29204
12058
12057
12056
24984
12055
12053
12051
MySQL apm 1
12050
MySQL LOG
12049
12048
기타 dhcp
12047
12046
12045
12044
12043
JavaScript vi
12042
기타 Nis/NFS
12041
12040
JavaScript
12039
기타 Process
12038
12037
12036
12035
JavaScript Quota
12034
MySQL LOG
12033
12032
12031
JavaScript IPCHAINS
12028
12026
12025
12020
12017
12015
12013