Lightbox2 ; 사진 자바스크립트

Lightbox는 사진이나 그림을 클릭하면 깔끔한 효과를 나타낼수 있도록 도와주는 자바스크립트입니다. 

미리보기 및 다운로드  : http://www.huddletogether.com/projects/lightbox2/

위 주소로 이동하시면 Lightbox를 설정한 예를 보실 수 있습니다. 또한 다운로드도 가능합니다.
Lightbox2 의 저작권은 Creative Commons Attribution 2.5 License 를 따르고 있습니다.


설정방법은, 먼저 위 다운로드 받을 수 있는 사이트로 들어가시면 중간에 다운로드 받는곳이 보입니다.
(밑에 그림과 같은곳을 찾아서 다운!!)

다운 받은 파일을 열어보시면 css폴더, images폴더, js폴더, index.html 문서가 있습니다.


Lightbox 사이트에서 설정방법을 보면,

Part 1 - Setup 1.Lightbox 2 uses the Prototype Framework and Scriptaculous Effects Library. You will need to include these three Javascript files in your header (in this order). <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.Include the Lightbox CSS file (or append your active stylesheet with the Lightbox styles). <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" /> 3.Check the CSS and make sure the referenced  prev.gif  and  next.gif  files are in the right location. Also, make sure the  loading.gif  and  close.gif  files as referenced near the top of the  lightbox.js  file are in the right location. Part 2 - Activate 1.Add a  rel="lightbox"  attribute to any link tag to activate the lightbox. For example: <a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a> Optional: Use the  title  attribute if you want to show a caption. 2.If you have a set of related images that you would like to group, follow step one but additionally include a group name between square brackets in the rel attribute. For example: <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> No limits to the number of image sets per page or how many images are allowed in each set. Go nuts!

이 설명은 다시 우리말로 해보면,

파 트1  - 설정 1. Lightbox2를 사용하고자 하는 페이지 내에서 아래 3개의 js 파일을 불러 옵니다. <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. lightbox.css 파일에서  prevlabel.gif 와  nextlabel.gif 의 이미지 경로를 수정하라고 합니다. 경로가 변한게 없으므로 수정할필요가 없습니다. 만약 손대셔야 한다면 lightbox.css 파일 16줄과 17줄에 있으면 lightbox.css 파일 기준으로 상대경로로 지정하세요. (잘 안되시면 절대 경로로 설정해보세요.) 다음으로 lightbox.js 파일에 있는 loading.gif 와 closelabel.gif 의 이미지 경로를 수정합니다.  원본 lightbox.js 파일 49줄 50줄은 아래와 같습니다. fileLoadingImage: 'images/loading.gif',     fileBottomNavCloseImage: 'images/closelabel.gif', 파트2  - 링크 기능은 단일창으로서 클릭시 창닫기와 모든 이미지를 "이전", "다음" 클릭으로 볼 수 있는 기능 2가지가 있습니다. 1. 기능 2가지 중 첫번째 단일창으로서 클릭시 이미지를 보여주며 다시 클릭하면 창이 닫힙니다. 이 기능은 보여줄 이미지가 1개 일때 사용하면 좋을것 같습니다.   <a href="보여줄 이미지 주소.jpg" rel="lightbox" title="제목">이미지 #1</a> 2. 두번째 기능입니다. 클릭시 "이전", "다음" 버튼을 클릭하여 링크되어진 모든 이미지를 보여줍니다. 이 기능은 이미지가 여러개일때 사용하면 좋을듯 합니다. <a href="보여줄 이미지 주소 #1.jpg" rel="lightbox[roadtrip]" title="제목 #1">이미지 #1</a> <a href="보여줄 이미지 주소 #2.jpg" rel="lightbox[roadtrip]" title="제목 #2">이미지 #2</a> <a href="보여줄 이미지 주소 #3.jpg" rel="lightbox[roadtrip]" title="제목 #3">이미지 #3</a> roadtrip(그룹이름) 요건 빼셔도 무방합니다.

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

그외 다른 이미지뷰어

shadowbox Greybox Highslide Lytebox

http://mjijackson.com/shadowbox/ http://orangoo.com/labs/GreyBox/ http://vikjavev.no/highslide/ http://www.dolem.com/lytebox

 

- 2008년 06월 16일 작성.