plugin Url & Download : http://fancybox.net/
test Url : http://www.uhoon.co.kr/test/521.html
라이센스 : http://fancyapps.com/fancybox/#license 2013.05.09 일 기준.
fancyBox licensed under Creative Commons Attribution-NonCommercial 3.0 license.
You are free to use fancyBox for your personal or non-profit website projects.
You can get the author's permission to use fancyBox for commercial websites by paying a fee.
----
개인 혹은 비영리사이트만 공짜...
이점 유의 (싱글 도메인 $19 / 멀티 도메인 $89)
- swf , iframe , image , youtube , Googlemap 등 팝업 플러그인.
Name | Description |
---|---|
padding | Space inside fancyBox around content. Can be set as array - [top, right, bottom, left]. Integer, Array; Default value: 15 |
margin | Minimum space between viewport and fancyBox. Can be set as array - [top, right, bottom, left]. Right and bottom margins are ignored if content dimensions exceeds viewport Integer, Array; Default value: 20 |
width | Default width for 'iframe' and 'swf' content. Also for 'inline', 'ajax' and 'html' if 'autoSize' is set to 'false'. Can be numeric or 'auto'. Number, String; Default value: 800 |
height | Default height for 'iframe' and 'swf' content. Also for 'inline', 'ajax' and 'html' if 'autoSize' is set to 'false'. Can be numeric or 'auto' Number, String; Default value: 600 |
minWidth | Minimum width fancyBox should be allowed to resize to Number; Default value: 100 |
minHeight | Minimum height fancyBox should be allowed to resize to Number; Default value: 100 |
maxWidth | Maximum width fancyBox should be allowed to resize to Number; Default value: 9999 |
maxHeight | Maximum height fancyBox should be allowed to resize to Number; Default value: 9999 |
autoSize | If true, then sets both autoHeight and autoWidth to true Boolean; Default value: true |
autoHeight | If set to true, for 'inline', 'ajax' and 'html' type content width is auto determined. If no dimensions set this may give unexpected results Boolean; Default value: false |
autoWidth | If set to true, for 'inline', 'ajax' and 'html' type content height is auto determined. If no dimensions set this may give unexpected results Boolean; Default value: false |
autoResize | If set to true, the content will be resized after window resize event Boolean; Default value: !isTouch |
autoCenter | If set to true, the content will always be centered Boolean; Default value: !isTouch |
fitToView | If set to true, fancyBox is resized to fit inside viewport before opening Boolean; Default value: true |
aspectRatio | If set to true, resizing is constrained by the original aspect ratio (images always keep ratio) Boolean; Default value: false |
topRatio | Top space ratio for vertical centering. If set to 0.5, then vertical and bottom space will be equal. If 0 - fancyBox will be at the viewport top Number; Default value: 0.5 |
leftRatio | Left space ratio for horizontal centering. If set to 0.5, then left and right space will be equal. If 0 - fancyBox will be at the viewport left Number; Default value: 0.5 |
scrolling | Set the overflow CSS property to create or hide scrollbars. Can be set to 'auto', 'yes', 'no' or 'visible' String; Default value: 'auto' |
wrapCSS | Customizable CSS class for wrapping element (useful for custom styling) string; Default value: |
arrows | If set to true, navigation arrows will be displayed Boolean; Default value: true |
closeBtn | If set to true, close button will be displayed Boolean; Default value: true |
closeClick | If set to true, fancyBox will be closed when user clicks the content Boolean; Default value: false |
nextClick | If set to true, will navigate to next gallery item when user clicks the content Boolean; Default value: false |
mouseWheel | If set to true, you will be able to navigate gallery using the mouse wheel Boolean; Default value: true |
autoPlay | If set to true, slideshow will start after opening the first gallery item Boolean; Default value: false |
playSpeed | Slideshow speed in milliseconds Integer; Default value: 3000 |
preload | Number of gallery images to preload Integer; Default value: 3 |
modal | If set to true, will disable navigation and closing Boolean; Default value: false |
loop | If set to true, enables cyclic navigation. This means, if you click "next" after you reach the last element, first element will be displayed (and vice versa). Boolean; Default value: true |
ajax | Options for ajax request Object; Default value: { dataType : 'html', headers : { 'X-fancyBox': true } } |
iframe | Options for content type "iframe" Object; Default value: { scrolling : 'auto', preload : true } |
swf | Options for content type "swf" Object; Default value: { wmode: 'transparent', allowfullscreen : 'true', allowscriptaccess : 'always' } |
keys | Define keyboard keys for gallery navigation, closing and slideshow Object; Default value: { next : { 13 : 'left', // enter 34 : 'up', // page down 39 : 'left', // right arrow 40 : 'up' // down arrow }, prev : { 8 : 'right', // backspace 33 : 'down', // page up 37 : 'right', // left arrow 38 : 'down' // up arrow }, close : [27], // escape key play : [32], // space - start/stop slideshow toggle : [70] // letter "f" - toggle fullscreen } |
direction | Default navigation direction (for navigation arrows, too) Object; Default value: { { next : 'left', prev : 'right' } } |
scrollOutside | If true, the script will try to avoid horizontal scrolling for iframes and html content Boolean; Default value: true |
index | Overrides group start index Integer; Default value: 0 |
type | Overrides type for content. Supported types are 'image', 'inline', 'ajax', 'iframe', 'swf' and 'html' String; Default value: null |
href | Overrides content source link String; Default value: null |
content | Overrides content to be displayed String; Default value: null |
title | Overrides title content, accepts any HTML String; Default value: null |
tpl | Object containing various templates Object; Default value: { wrap : '<div class="fancybox-wrap" tabIndex="-1"><div class="fancybox-skin"><div class="fancybox-outer"><div class="fancybox-inner"></div></div></div></div>', image : '<img class="fancybox-image" src="{href}" alt="" />', iframe : '<iframe id="fancybox-frame{rnd}" name="fancybox-frame{rnd}" class="fancybox-iframe" frameborder="0" vspace="0" hspace="0"' + ($.browser.msie ? ' allowtransparency="true"' : '') + '></iframe>', error : '<p class="fancybox-error">The requested content cannot be loaded.<br/>Please try again later.</p>', closeBtn : '<a title="Close" class="fancybox-item fancybox-close" href="javascript:;"></a>', next : '<a title="Next" class="fancybox-nav fancybox-next" href="javascript:;"><span></span></a>', prev : '<a title="Previous" class="fancybox-nav fancybox-prev" href="javascript:;"><span></span></a>' } |
openEffect / closeEffect / nextEffect / prevEffect | Animation effect ('elastic', 'fade' or 'none') for each transition type String; Default value: 'fade', 'fade', 'elastic', 'elastic' |
openSpeed / closeSpeed / nextSpeed / prevSpeed | The time it takes (in ms, or "slow", "normal", "fast") to complete transition Integer; Default value: 250 |
openEasing / closeEasing / nextEasing / prevEasing | Easing method for each transition type. You have numerous choices if easing plugin is included String; Default value: 'swing' |
openOpacity / closeOpacity | If set to true, transparency is changed for elastic transitions Boolean; Default value: true |
openMethod / closeMethod / nextMethod / prevMethod | Method from $.fancybox.transitions() that handles transition (you can add custom effects there) String; Default value: 'zoomIn' / 'zoomOut' / 'changeIn' / 'changeOut' |
helpers | Object containing enabled helpers and options for each of them Object; Default value: { overlay : { closeClick : true, // if true, fancyBox will be closed when user clicks on the overlay speedOut : 200, // duration of fadeOut animation showEarly : true, // indicates if should be opened immediately or wait until the content is ready css : {}, // custom CSS properties locked : true // if true, the content will be locked into overlay }, title : { type : 'float' // 'float', 'inside', 'outside' or 'over' } } |
live | If set to true, fancyBox uses "live" to assign click event. Set to "false", if you need to apply only to current collection, e.g., if using something like -$("#page").children().filter('a').eq(0).fancybox(); Boolean; Default value: true |
parent | Parent element of the container. This is useful for ASP.NET where the top element is "form" -$(".fancybox").fancybox({ parent: "form:first" // jQuery selector }); String; Default value: body |
Name | Description |
---|---|
open |
$.fancybox([group], [options]) First parameter can be in various types, examples: $.fancybox([
{href : 'img1.jpg', title : 'Title'},
{href : 'img2.jpg', title : 'Title'}
]); - array containing objects $.fancybox( {href : 'image.jpg', title : 'Lorem lipsum'} ); - single object $.fancybox( ['image.jpg', 'image.jpg'] ); - array containing links as strings$.fancybox( 'image.jpg' ); - string as source link $.fancybox( [jQuery object] ); $.fancybox( '<h1>Lorem lipsum</h1>' ); |
cancel |
|
close |
$.fancybox.close( true ) ) than fancyBox is removed immediatly |
play |
|
next |
|
prev |
|
jumpto |
$.fancybox.jumpto( 0 ); will open the first, e.g. $.fancybox.jumpto( 1 ); will second, etc |
reposition |
|
update |
|
toggle |
|
showLoading |
|
hideLoading |
|
Name | Description |
---|---|
onCancel | Called after user triggers canceling. Note: If false is returned by the callback, the canceling will be halted |
beforeLoad | Called before starting to load content. Note: If false is returned by the callback, the loading will be halted |
afterLoad | Called after content is loaded. Receives two arguments - upcoming and current object - http://jsfiddle.net/xW5gs/ Note: If false is returned by the callback, the content will not be shown. |
beforeShow | Called right before open animations has started |
afterShow | Called after open animations has ended |
beforeClose | Called right after closing has been triggered but not yet started Note: If false is returned by the callback, the closing will be halted. |
afterClose | Called after closing animation has ended |
onUpdate | Called after window resize, scroll or orientation change events are triggered |
onPlayStart | Called after slideshdow has started |
onPlayEnd | Called after slideshdow has stoped |