fancyapps에 해당하는 글 1건

  1. jQuery fancyBox - 레이어팝업2016.11.01

jQuery fancyBox - 레이어팝업

Open API/Jquery|2016. 11. 1. 10:14
반응형




plugin Url & Download : http://fancybox.net/


샘플코드 다운로드 :  521.zip



라이센스.

http://fancyapps.com/fancybox/#license  2016.11.01 일 기준.


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 등 팝업 플러그인.


 
NameDescription
paddingSpace inside fancyBox around content. Can be set as array - [top, right, bottom, left].
Integer, Array; Default value: 15
marginMinimum 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
widthDefault 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
heightDefault 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
minWidthMinimum width fancyBox should be allowed to resize to
Number; Default value: 100
minHeightMinimum height fancyBox should be allowed to resize to
Number; Default value: 100
maxWidthMaximum width fancyBox should be allowed to resize to
Number; Default value: 9999
maxHeightMaximum height fancyBox should be allowed to resize to
Number; Default value: 9999
autoSizeIf true, then sets both autoHeight and autoWidth to true
Boolean; Default value: true
autoHeightIf 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
autoWidthIf 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
autoResizeIf set to true, the content will be resized after window resize event
Boolean; Default value: !isTouch
autoCenterIf set to true, the content will always be centered
Boolean; Default value: !isTouch
fitToViewIf set to true, fancyBox is resized to fit inside viewport before opening
Boolean; Default value: true
aspectRatioIf set to true, resizing is constrained by the original aspect ratio (images always keep ratio)
Boolean; Default value: false
topRatioTop 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
leftRatioLeft 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
scrollingSet the overflow CSS property to create or hide scrollbars. Can be set to 'auto', 'yes', 'no' or 'visible'
String; Default value: 'auto'
wrapCSSCustomizable CSS class for wrapping element (useful for custom styling)
string; Default value:
arrowsIf set to true, navigation arrows will be displayed
Boolean; Default value: true
closeBtnIf set to true, close button will be displayed
Boolean; Default value: true
closeClickIf set to true, fancyBox will be closed when user clicks the content
Boolean; Default value: false
nextClickIf set to true, will navigate to next gallery item when user clicks the content
Boolean; Default value: false
mouseWheelIf set to true, you will be able to navigate gallery using the mouse wheel
Boolean; Default value: true
autoPlayIf set to true, slideshow will start after opening the first gallery item
Boolean; Default value: false
playSpeedSlideshow speed in milliseconds
Integer; Default value: 3000
preloadNumber of gallery images to preload
Integer; Default value: 3
modalIf set to true, will disable navigation and closing
Boolean; Default value: false
loopIf 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
ajaxOptions for ajax request
Object; Default value:
{
	dataType : 'html',
	headers  : { 'X-fancyBox': true }
}
iframeOptions for content type "iframe"
Object; Default value:
{
	scrolling : 'auto',
	preload   : true
}
swfOptions for content type "swf"
Object; Default value:
{
	wmode: 'transparent',
	allowfullscreen   : 'true',
	allowscriptaccess : 'always'
}
keysDefine 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
}
directionDefault navigation direction (for navigation arrows, too)
Object; Default value:
{
	{
		next : 'left',
		prev : 'right'
	}
}
scrollOutsideIf true, the script will try to avoid horizontal scrolling for iframes and html content
Boolean; Default value: true
indexOverrides group start index
Integer; Default value: 0
typeOverrides type for content. Supported types are 'image', 'inline', 'ajax', 'iframe', 'swf' and 'html'
String; Default value: null
hrefOverrides content source link
String; Default value: null
contentOverrides content to be displayed
String; Default value: null
titleOverrides title content, accepts any HTML
String; Default value: null
tplObject 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 / prevEffectAnimation effect ('elastic', 'fade' or 'none') for each transition type
String; Default value: 'fade', 'fade', 'elastic', 'elastic'
openSpeed / closeSpeed / nextSpeed / prevSpeedThe time it takes (in ms, or "slow", "normal", "fast") to complete transition
Integer; Default value: 250
openEasing / closeEasing / nextEasing / prevEasingEasing method for each transition type. You have numerous choices if easing plugin is included
String; Default value: 'swing'
openOpacity / closeOpacityIf set to true, transparency is changed for elastic transitions
Boolean; Default value: true
openMethod / closeMethod / nextMethod / prevMethodMethod from $.fancybox.transitions() that handles transition (you can add custom effects there)
String; Default value: 'zoomIn' / 'zoomOut' / 'changeIn' / 'changeOut'
helpersObject 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'
	}
}
liveIf 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
parentParent 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

 
NameDescription
open

$.fancybox.open( [group], [options] )

Launch fancyBox, the same as $.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

$.fancybox.cancel()

Cancel loading image or abort ajax request
close

$.fancybox.close( [force] )

If fancyBox is fully opened (open animation has ended) then start closing animation. If not or closing is forced (e.g. called like $.fancybox.close( true )) than fancyBox is removed immediatly
play

$.fancybox.play()

Start or stop (if already running) slideshow
next

$.fancybox.next()

Navigate to next gallery item
prev

$.fancybox.prev()

Navigate to previous gallery item
jumpto

$.fancybox.jumpto( [index] )

Navigate to gallery item by index. Item counting starts from 0, e.g. $.fancybox.jumpto( 0 ); will open the first, e.g. $.fancybox.jumpto( 1 ); will second, etc
reposition

$.fancybox.reposition()

Will center fancyBox inside viewport and toggle position type to fixed or absolute if needed
update

$.fancybox.update()

Auto-sizes fancyBox height to match height of content
toggle

$.fancybox.toggle()

If content is resized to fit inside viewport than it will be expanded to full size (and vice verse)
showLoading

$.fancybox.showLoading()

Shows loading animation
hideLoading

$.fancybox.hideLoading()

Hides loading animation


 
NameDescription
onCancelCalled after user triggers canceling. 
Note: If false is returned by the callback, the canceling will be halted
beforeLoadCalled before starting to load content. 
Note: If false is returned by the callback, the loading will be halted
afterLoadCalled 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.
beforeShowCalled right before open animations has started
afterShowCalled after open animations has ended
beforeCloseCalled right after closing has been triggered but not yet started 
Note: If false is returned by the callback, the closing will be halted.
afterCloseCalled after closing animation has ended
onUpdateCalled after window resize, scroll or orientation change events are triggered
onPlayStartCalled after slideshdow has started
onPlayEndCalled after slideshdow has stoped




 


 







저작자표시 (새창열림)

댓글()
이전 1 다음

티스토리툴바