FancyBox Plugin

FancyBox 플러그인의 사용

많은 사람들이 기존 LightBox 플러그인을 사용하며 기능이 부족하는 점을 느꼈습니다. LightBox 플러그인의 기능 부족으로 인해 수많은 라이트박스 플러그인이 생겨났습니다. 여기서는 그 중에서 가장 기능이 풍부하고 많이 사용되는 FancyBox 플러그인을 알아봅니다. FancyBox 플러그인의 공식 홈페이지는 http://fancybox.net 입니다.



							<link rel="stylesheet" href="/florakid_lib/fancybox/jquery.fancybox-1.3.4.css" />
							<style type="text/css">

							</style>
							<script type="text/javascript" src="/florakid_lib/fancybox/jquery.fancybox-1.3.4.js"></script>
							<script type="text/javascript" src="/florakid_lib/fancybox/jquery.easing-1.3.pack.js"></script>
							<script type="text/javascript" src="/florakid_lib/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
							<script type="text/javascript">

							</script>
						

추가 기능을 사용하려면 상기의 소스코드처럼 easing 플러그인과 mousewheel 플러그인을 추가해야 합니다.

body 태그를 구성할 때는 LightBox 플러그인과 마찬가지로 a 태그의 href 속성에 이미지를 넣어 줍니다. LightBox 플러그인과의 차이점은 LightBox 플러그인은 플러그인이 적용된 모든 이미지를 버튼을 사용해 오고갈 수 있지만, FancyBox 플러그인은 rel 속성이 같은 이미지들끼리만 이동이 가능합니다.

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

FancyBox 플러그인의 핵심 메서드는 fancybox() 입니다.
코드를 실행하고 a 태그를 누르면 라이트박스가 뜹니다. 마우스휠 플러그인을 추가했으므로 마우스 스크롤을 사용해서 이미지를 이동할 수 있습니다. LightBox 플러그인은 이미지에 제목을 입력할 수 있었습니다. FancyBox 플러그인은 LightBox 플러그인의 모든 기능을 포함하므로 당연히 이미지에 제목을 입력할 수 있습니다. 이미지에 제목을 주는 방법 역시 LightBox 플러그인처럼 a 태그에 title 속성을 입력하면 됩니다.

상기의 코드처럼 title 속성을 추가하면 코드 실행시 이미지 아래 쪽에 title 속성이 출력됩니다.
FancyBox 플러그인은 모든 이미지 파일이 같은 폴더에 들어 있습니다. 따라서 실무에서 활용할 때는 CSS 파일을 모두 수정해야 합니다. 모두 찾아 바꾸기 기능을 사용하면 쉽게 바꿀 수 있으므로 후에 실무에 적요할 때 기억해 주세요.

FancyBox 플러그인을 사용한 기능

FancyBox 플러그인을 사용하면 div 태그를 사용한 다이얼로그를 만들 수 있습니다. jQuery UI 플러그인을 사용해도 다이얼로그를 만들 수 있지만, 정해진 형태로만 다이얼로그를 생성할 수 있었습니다. FancyBox 플러그인을 사용하면 사용자가 여러가지로 커스터마이징이 가능한 다이얼로그를 만들 수 있습니다.



다이얼로그 만들기

Dialog with FancyBox

Video with FancyBox

Iframe with FancyBox

id 속성으로 dialogs를 갖는 div 태그는 무대의 뒤편과 같습니다. 곧 등장할 것이지만 시작부터 등장하면 안 되는 요소를 모아 놓은 곳입니다. 그래서 style 속성에 display:none을 입력했습니다. 사용자가 특정 버튼을 눌렀을 때 해당 요소를 보여주게 하면 되겠죠?

a 태그에 FancyBox 플러그인을 적용합니다. 이제 a 태그를 클릭하면 다이얼로그를 자동으로 생성합니다. 코드를 실행하고 다이얼로그를 확인해봅시다. 스타일 시트를 수정하면 원하는 형태로 쉽게 바꿀 수 있습니다.

이렇게 div 태그에 무엇이든 넣으면 다이얼로그를 만들 수 있습니다. div 태그 안에 동영상을 넣으면 동영상 다이얼로그가 만들어 집니다.

iframe 태그는 동영상 외에도 웹 페이지를 곧바로 출력할 수도 있으므로 웹 페이지도 같은 방법으로 띄울 수 있습니다. FancyBox 플러그인을 사용하면 iframe 태그를 별도로 생성할 필요가 없습니다. a 태그의 class 속성에 iframe을 입력해 보세요.
코드를 실행하면 자동으로 iframe 태그가 생성된 후 라이트박스에 담겨 출력됩니다.



FancyBox 플러그인의 옵션

FancyBox 플러그인도 LightBox 플러그인과 마찬가지로 핵심 메서드의 첫 번째 매개 변수에 옵션을 입력합니다. 상기 세번째 예제의 옵션으로 width 속성과 height 속성을 지정했습니다.

							$("a.iframe").fancybox({
								width:1200, height:500
							});						
						

LightBox 플러그인의 옵션에 비해 FancyBox 플러그인의 옵션은 매우 다양합니다. FancyBox 플러그인의 옵션은 FancyBox 플러그인의 공식 홈페이지를 참조하세요. 각각의 옵션을 같은 방법으로 쉽게 이용할 수 있을 것입니다.
http://fancybox.net/api

FancyBox 플러그인의 전역 메서드

LightBox 플러그인과 FancyBox 플러그인의 가장 큰 차이점은 FancyBox 플러그인은 전역 메서드를 제공한다는 점입니다.

FancyBox 플러그인의 전역 메서드
메서드 이름 설명
$.fancybox.showAcitivity() 로딩 화면을 보여줍니다.
$.fancybox.hideAcitivity() 로딩 화면을 감춥니다.
$.fancybox.next() 다음 순서의 라이트박스를 보여줍니다.
$.fancybox.prev() 이전 순서의 라이트박스를 보여줍니다.
$.fancybox.pos() 특정 순서의 라이트박스를 보여줍니다.
$.fancybox.cancel() 내용을 불러오는 것을 중단합니다.
$.fancybox.close() 라이트박스를 닫습니다.
$.fancybox.resize() 내용물의 크기에 맞게 라이트박스의 크기를 다시 조절합니다.
$.fancybox.center() 라이트박스를 중심에 위치시킵니다.

FancyBox가 이어한 메서드를 왜 사용하는지 의문이 들 수 있습니다. 라이트박스를 실행한 후 10초 지나고 자동으로 사라집니다. 이러한 기능은 기존 LightBox 플러그인으로 구현할 수 없으며, FancyBox 플러그인에 있는 상기의 전역 메서드를 사용해 구현해야 합니다.

여기서는 페이지를 실행할 때 자동으로 라이트박스를 실행하고, 일정 시간 후에 라이트박스가 사라지는 예를 만듭니다. 일정 시간 후에라는 말을 듣고 바로 setTimeout() 함수를 생각했으면 좋겠습니다.

라이트박스를 강제로 실행하는 방법부터 알아봅시다. a 태그를 클릭할 때 라이트박스가 뜨죠? 따라서 아래의 코드처럼 a 태그에 click 이벤트를 강제로 발생시키면 라이트박스를 강제로 띄울 수 있습니다.

							$(function(){
								$("a.iframe").fancybox({
									width:1200, height:500
								}).click(function () {
									// 5초 후에 함수 실행
									setTimeout(function () {
										// fancybox를 닫기
										$.fancybox.close();
									}, 5000)
								}).trigger('click');
							});					
						

이제 상기 소스코드처럼 click 이벤트를 연결하고 setTimeout() 함수를 사용해 3초 후에 전역 메서드를 사용해 라이트박스를 닫으면 됩니다. click 이벤트를 연결한 수에 click 이벤트를 강제로 실행해야 한다는 점을 기억해 주세요.
위 코드를 실행하면 자동으로 라이트박스가 뜨고 3초 후에 자동으로 종료됩니다.



플리커 이미지 앨범

라이트박스만 사용하니 예제가 지루하게 느껴졌을 수도 있습니다. 라이트박스와 Ajax와 함께 사용하는 예제를 만들어 봅니다. 플리커에서 이미지를 가져온 후에 각 이미지를 라이트박스를 적용해 봅시다. 다음 URL은 가입 없이 사용할 수 있는 플리커의 이미지 제공 웹 서비스입니다.

http://api.flickr.com/services/feeds/photos_public.gne

페이지에 들어가면, XML 문서를 볼 수 있습니다. 이 URL의 요청 매개변수에는 아래 표의 매개변수를 입력할 수 있습니다.

플리커의 용청 매개 변수

플리커의 용청 매개 변수
요청 매개 변수 이름 설명
tags 검색하려는 사진의 키워드입니다.
format 가져올 데이터 형식을 지정합니다.

※ 참고 ※
오픈 API를 이용할 때는 항상 문서를 먼저 참고하는 게 좋습니다. 이 절에서 다루는 플리커는 http://www.flickr.com/services/feeds/docs/photos_publick/를 참고하세요.

Flickr Image Album jQuery FancyBox



아래 소스 코드 처럼 HTML 태그를 구성합니다. jQuery의 serialize() 메서드를 사용해 바로 데이터를 요철할 것이므로 input[type="hidden"] 태그를 사용합니다. 상단의 표를 참고하면 왜 아래의 코드의 입력 양식을 입력했는지 알 수 있습니다.

HTML

							<h3>Flickr Image Album jQuery FancyBox</h3>
							<div id="" class="desc">
								<form id="search_form">
									<input type="text" name="tags" />
									<input type="hidden" name="format" value="json" />
									<input type="submit" value="검색" />
								</form>
							</div>
							<div id="images">
								
							</div>		
						

아래 스크립트 소스처럼 form 태그에 submit 이벤트를 연결하고 기본 이벤트를 제거합니다. (return false;)
이어서 Ajax를 수행하는 부분을 작성합니다. 외부 도메인의 데이터를 가져오므로, 당연히 JSONP를 사용해야 합니다. API 문서를 잘 읽어봐야 요청 매개 변수에 callback을 써야 하는지 jsoncallback을 써야 하는 지 알 수 있습니다.
플리커의 API 문서에는 jsoncallback을 사용해 달라고 써 있습니다. 따라서 아래의 코드처럼 jsoncallback을 사용해 URL을 구성하고 getJSON() 메서드를 사용합니다.

Ajax를 사용해 데이터를 들고 오면 아래의 소스 코드처럼 문서 객체를 생성합니다. 마지막으로 문서 객체를 모두 생성한 후에 FancyBox 플러그인을 사용합니다.

JavaScript

							$(function(){
								$("#search_form").submit(function (event) {
									//Ajax를 수행
									var url = 'http://api.flickr.com/services/feeds/photos_public.gne?jsoncallback=?';
									$.getJSON(url, $(this).serialize(), function (data) {
										// #images를 비웁니다.
										$("#images").empty();

										// #images에 image를 추가합니다.
										$.each(data.items, function (i, item) {
											// img 태그를 생성합니다.
											var $image = $("").attr({
												'src': item.media.m
											});

											//  a 태그를 생성합니다.
											$("").attr({
												'class': 'flickr_image',
												'href':item.media.m,
												'rel':'fancybox'
											}).html($image).appendTo("#images");
										});

										// FancyBox를 사용합니다.
										$("a.flickr_image").fancybox();
									});

									// 이벤트 전달과 기본 이벤트를 막습니다.
									return false;
								})
							});
						

아래와 같이 style 태그를 입력해 준비해 둡니다.

CSS

							#images{overflow:hidden;}
							.flickr_image{float:left;}
							.flickr_image > img{width:200px;height:120px;float:left;}
						

여기서는 편의를 위해 가입이 필요 없는 플리커 오픈 API를 사용했는데요. 정식 플리커 오픈 API를 이용하면 훨씬 다양한 웹 애플리케이션을 만들 수 있습니다.