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

Lightbox2 적용 방법

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

게시글 목록

번호 제목
24900
24899
24898
24897
24896
24895
24894
24893
24892
24891
24890
24889
24888
24887
24886
11687
24885
24884
24883
24882
24881
24879
24878
24877
24875
24874
24873
24872
24871
11683
11662
11659
29136
11647
11644
11641
11634
11632
29135
11631
11628
24870
24869
24868
24867
24866
24865
24864
24863
24862
24861
24860
11627
24859
24858
24856
24855
24854
24853
24852
29130
11625
11622
11617
11604
11596
11591
11586
29128
11583
11579
11578
11574
11566
11565
11562
11561
29125
11558
11556
11533
11529
29118
11526
11519
29115
11518
11516
11515
11509
11508
29112
11496
29109
29106
11495
11488
11486
11483
11471