jQuery fancybox plugin 사용하기

오늘은 매력직인 jQuery Box Plugin 인 fancybox 에 대해 정리를 합니다. 

장점 : 예쁘다, 쓰기 편하다   끝.

단점 : 찾으신분은 리플 달아 주세요

homepage : fancybox.net

아래와 같이 원하는 컨텐츠 (이미지 및  HTML) 을 사각형 박스에 넣어서 화면중앙에 표시 하는 플러그인 입니다.

보통 모달로 오픈하면 컨텐츠에 시점을 집중시켜 표현력을 올릴 수 있습니다. 보통은 우상단 'x' 박스를 클릭하여 종료합니다.

fancybox example)

아래는 대충 다운로드 후 압축풀고 보여지는 화면 입니다. 대충 자신이 사용할 디렉토리로 카피후 사용하시면 됩니다.

사용예제 )

>> 사용법

사용법은 간단하다

• 먼저 jquery link insert: 
  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
• facybox관련 js, css insert
  <script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.4.pack.js"></script>
  <link rel="stylesheet" type="text/css" href="./fancybox/jquery.fancybox-1.3.4.css" media="screen" />

$('select').fancybox( {options});    : option은 상단 예제 코드중 하나를 대충 사용하면 Okay

- 예제에는 없는데, 동적 컨텐츠를 보여주는 방법은 아래와 같이 하면 간단히 처리 됩니다.

//동적으로 로딩함 !!!
            $('#dynamicLoadingBtn').click(function() {
            	$("#myEmptyDiv").fancybox({
                    'content' : '
hi Mulder hiiiii
'  // 여기에 넣고 싶은 HTML 을 넣으시면 됩니다.
                }).click();
            });

만약 fancybox를 종료(닫기)하려면 아래와 같이 처리 하면 됩니다.

$.fancybox.close();