LightBox Plugin

jQuery로 만들어진 라이트박스를 생성하는 플러그인을 몇 가지 정리하면 LightBox, LightBox2, Visual Lightbox, HoverLightBox, GreyBox LightBox, LightBox Gone Wild, Picasa LightBox, FancyBox, ColorBox, ShadeBox, TickerBox, Fancy Zoom, NyroModal, ImageBox, GreyBox redux, LightWindow, LiteBox, LightView, PicBox, SimpleModal, Boxy, SlimBox 등 아주 많습니다.

라이트박스는 기능과 LightBox라는 플러그인의 이름이 같으므로 헷갈릴 수 있어서 한글 표기와 영어 표기로 구분합니다. 라이트박스라는 한글로 표기하면 기능을 뜻하고, LightBox라고 영어로 표기하면 플러그인의 이름입니다.

LightBox 플러그인의 사용



이미지를 곧바로 놓는 것이 아니라 a 태그의 href 속성에 입력한다는 점을 기억해 주세요. href 속성의 이미지가 라이트박스에 뜹니다.

이제 script 태그에서 LightBox 플러그인을 적용합니다. LightBox 플러그인의 핵심 메서드는 lightbox() 메서드이며 a 태그에 적용합니다.

a 태그를 클릭하면 라이트박스가 뜹니다. LightBox 플러그인을 사용하면 이미지를 좌우로 이동할 수 있습니다. 버튼을 누르거나 키보드의 P(Previous)키 또는 N(Next)키를 사용해 보세요.

라이트박스에 제목을 표시하고 싶으면 a 태그의 title속성에 아래 소스코드처럼 입력합니다.

							<div class="lightbox">
								<a title="Chrysanthemum" href="/florakid_lib/images/lightbox/Chrysanthemum.jpg">Image-1</a>
								<a title="Desert" href="/florakid_lib/images/lightbox/Desert.jpg">Image-2</a>
								<a title="Hydrangeas" href="/florakid_lib/images/lightbox/Hydrangeas.jpg">Image-3</a>
								<a title="Jellyfish" href="/florakid_lib/images/lightbox/Jellyfish.jpg">Image-4</a>
								<a title="Koala" href="/florakid_lib/images/lightbox/Koala.jpg">Image-5</a>
								<a title="Lighthouse" href="/florakid_lib/images/lightbox/Lighthouse.jpg">Image-6</a>
								<a title="Penguins" href="/florakid_lib/images/lightbox/Penguins.jpg">Image-7</a>
								<a title="Tulips" href="/florakid_lib/images/lightbox/Tulips.jpg">Image-8</a>
							</div>
						


브라우저의 요소 검사를 사용하면 아래의 소스 코드와 같이 태그가 추가된 것을 볼 수 있는데요. 스타일 시트에서 각각의 id와 class를 변경하면 원하는 모양으로 변경해 사용할 수 있습니다. LightBox 플러그인의 소스가 간단하므로 조금 분석하면 쉽게 비슷한 기능을 구현할 수 있습니다.

							<div id="jquery-lightbox" style="top: 281.5px; left: 0px; ">
								<div id="lightbox-container-image-box" style="width: 532px; height: 404px; ">
									<div id="lightbox-container-image">
										<img id="lightbox-image" style="display: inline; " src="/florakid_lib/images/lightbox/Desert.jpg">
										<div style="display: block; " id="lightbox-nav">
											<a href="#" id="lightbox-nav-btnPrev" style="display: block; height: 404px; background-image: url(http://florakid.nayana.com/florakid_lib/js/lightbox/images/lightbox-blank.gif); background-color: transparent; background-position: initial initial; background-repeat: no-repeat no-repeat; "></a>
											<a href="#" id="lightbox-nav-btnNext" style="display: block; height: 404px; background-image: url(http://florakid.nayana.com/florakid_lib/js/lightbox/images/lightbox-blank.gif); background-color: transparent; background-position: initial initial; background-repeat: no-repeat no-repeat; "></a>
										</div>
										<div id="lightbox-loading" style="display: none; ">
											<a href="#" id="lightbox-loading-link"><img src="/florakid_lib/js/lightbox/images/lightbox-ico-loading.gif"></a>
										</div>
									</div>
								</div>

								<div id="lightbox-container-image-data-box" style="display: block; width: 512px; ">
									<div id="lightbox-container-image-data">
										<div id="lightbox-image-details">
											<span id="lightbox-image-details-caption" style="display: inline; ">Desert</span>
											<span id="lightbox-image-details-currentNumber" style="display: block; ">Image 2 of 8</span>
										</div>
										<div id="lightbox-secNav">
											<a href="#" id="lightbox-secNav-btnClose">
												<img src="/florakid_lib/js/lightbox/images/lightbox-btn-close.gif">
											</a>
										</div>
									</div>
								</div>
							</div>
						

잠시 생각하고 넘어갈 것은 모든 a 태그가 LightBox 형태로 변환되면 안 되겠죠? 따라서 LightBox로 변환하려는 문서 객체를 정확하게 선택할 수 있는 방법이 필요하니다. 일반적으로 클래스를 주는 방법을 사용합니다.


또는 a 태그의 rel 속성을 지정하는 방법도 사용합니다.
rel 속성을 지정했으므로, 속성 선택자를 사용하면 쉽게 원하는 a 태그를 구분할 수 있습니다. 아래와 같이 원하는 a 태그를 선택할 수 있습니다.



LightBox 플러그인의 옵션

LightBox 플러그인의 옵션
옵션 속성 이름 설명
overlayBgColor 라이트박스가 실행됐을 때 배경 색을 지정합니다.
overlayOpacity 라이트박스가 실행됐을 때 배경의 투명도를 지정합니다.
imageLoading 로딩 이미지를 지정합니다.
imageBtnClose 종료 버튼의 이미지를 지정합니다.
imageBtnPrev 이전 버튼의 이미지를 지정합니다.
imageBtnNext 다음 버튼의 이미지를 지정합니다.
imageBlank 공백 부분의 이미지를 지정합니다.
containerBorderSize 라이트박스의 테두리 두께를 지정합니다.
containerResizeSpeed 라이트박스의 크기 변화 속도를 지정합니다.
txtImage 제목의 Image 부분의 글자를 지정합니다.
txtOf 제목의 of 부분의 글자를 지정합니다.
keyToClose 라이트박스를 닫는 키보드 키를 지정합니다.
keyToPrev 이전 순서의 라이트박스로 이동하는 키보드 키를 지정합니다.
keyToNext 다음 순서의 라이트박스로 이동하는 키보드 키를 지정합니다.

※ 참고 ※
이미지와 관련된 옵션 속성은 LightBox 플러그인의 images 폴더를 직접열어 보면 쉽게 이해할 수 있습니다. 또한 LightBox 플러그인을 적용한 라이트박스는 제목 아래에 "Image 1 of 8" 형태의 문자열을 삽입합니다. LightBox 플러그인의 옵션 속성 txtImage와txtOf는 여기서 Image와 of 글자를 지정하는 속성입니다.