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

Lightbox2 적용 방법

· 18년 전 · 2238 · 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년 전
플레쉬 효과가 잇는 이미지 팝업창

게시글 목록

번호 제목
12452
40
25015
12447
12446
12445
JavaScript PLSQL이란
29296
12440
기타 메뉴 4
12438
12437
29294
35
32
12434
12433
12432
29293
29
12431
12428
12421
29292
12411
12402
27
29290
12400
24
12397
12396
21
12391
12390
18
16
12377
12373
13
9
12372
12371
12363
1
13432
12362
12360
12355
25014
29287
12352
12349
29279
12344
12340
12335
12333
12331
29273
12330
12329
12328
12324
12323
12318
12316
12313
12310
12309
12307
12303
12296
12291
12280
12277
12275
29272
12274
12260
12252
12250
12248
29267
12245
29266
29261
12239
12238
29251
12236
12231
12228
12214
12211
12210
29248
29247
25010
12208
12207
12202