태터데스크 관리자

도움말
닫기
적용하기   첫페이지 만들기

태터데스크 메시지

저장하였습니다.

블러그나 갤러리에서 많이 사용되고 있는 lightbox 효과는 플래쉬에 뒤지지 않을 막강한 이미지 뷰어 기능을 제공해 준다.

스크립트만 이해한다면 디자인도 변경하여 간단하게 내 사이트에도 적용 시킬 수 있다.

 일반적으로 사용하는 lightbox2의 사용방법을 알아보기로 하자.

 

 

사용방법

 PART 1 - SETUP

 1. 순서대로 태그 안에 아래 3개의 자바스크립트를 포함시킨다.
<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. 또한 Lightbox CSS 파일을 포함시킨다.

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

 

3. CSS를 체크하여 PREV(이전), NEXT(다음)로 사용되는 이미지들을 체크 해야하고, js파일을 체크하여 loding(로딩), close(닫기)로 사용되는 이미지들을 확인 해야한다.

 

위와 관련된 js,css,images 등은 첨부파일에 포함되어 있다.

 

 

PART 2 - ACTIVATE

 

1. lightbox를 사용할 링크 태그에 rel="lightbox" 속성을 추가해 준다. title 속성을 사용하면 캡션을 표시할 수도 있다. 

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

 

2. 같은 그룹의 이미지들의 경우에는 그룹 이름을 대괄호에 포함하여 사용 할 수 있다.

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

 

 

WEBSITE

lightbox : http://www.huddletogether.com/projects/lightbox/

lightbox2 : http://www.huddletogether.com/projects/lightbox2/

 

이 외에도 많은 미러사이트들이 기능을 조금 바꿔서 공개한 버전도 적지 않게 있으므로 자신의 구미에 당기는 버젼을 찾아보자.

 

신고

'Script > Dom' 카테고리의 다른 글

dom 정리  (0) 2011.11.21
이미지뷰 lightbox  (0) 2010.08.25
드래그 가능한 레이어 팝업  (0) 2010.08.25
바르지 않는 표현 - 추천 하는 표현  (0) 2008.04.25
Dom 사용방법  (0) 2008.04.25
브라우저별 객체 판별 스크립트  (0) 2008.04.25
Posted by 고시랑
이전버튼 1 2 3 4 5 6 이전버튼

티스토리 툴바