fancybox api

You can pass options as key/value object to fancybox() function or modify them at the bottom of FancyBox JS file. These are options for 1.3+, for versions 1.2+ look there.

Key	Default value	Description
padding	10	Space between FancyBox wrapper and content
margin	20	Space between viewport and FancyBox wrapper
opacity	false	When true, transparency of content is changed for elastic transitions
modal	false	When true, 'overlayShow' is set to 'true' and 'hideOnOverlayClick', 'hideOnContentClick', 'enableEscapeButton', 'showCloseButton' are set to 'false'
cyclic	false	When true, galleries will be cyclic, allowing you to keep pressing next/back.
scrolling	'auto'	Set the overflow CSS property to create or hide scrollbars. Can be set to 'auto', 'yes', or 'no'
width	560	Width for content types 'iframe' and 'swf'. Also set for inline content if 'autoDimensions' is set to 'false'
height	340	Height for content types 'iframe' and 'swf'. Also set for inline content if 'autoDimensions' is set to 'false'
autoScale	true	If true, FancyBox is scaled to fit in viewport
autoDimensions	true	For inline and ajax views, resizes the view to the element recieves. Make sure it has dimensions otherwise this will give unexpected results
centerOnScroll	false	When true, FancyBox is centered while scrolling page
ajax	{ }	Ajax options  Note: 'error' and 'success' will be overwritten by FancyBox
swf	{wmode: 'transparent'}	Params to put on the swf object
hideOnOverlayClick	true	Toggle if clicking the overlay should close FancyBox
hideOnContentClick	false	Toggle if clicking the content should close FancyBox
overlayShow	true	Toggle overlay
overlayOpacity	0.3	Opacity of the overlay (from 0 to 1; default - 0.3)
overlayColor	'#666'	Color of the overlay
titleShow	true	Toggle title
titlePosition	'outside'	The position of title. Can be set to 'outside', 'inside' or 'over'
titleFormat	null	Callback to customize title area. You can set any html - custom image counter or even custom navigation
transitionIn, transitionOut	'fade'	The transition type. Can be set to 'elastic', 'fade' or 'none'
speedIn, speedOut	300	Speed of the fade and elastic transitions, in milliseconds
changeSpeed	300	Speed of resizing when changing gallery items, in milliseconds
changeFade	'fast'	Speed of the content fading while changing gallery items
easingIn, easingOut	'swing'	Easing used for elastic animations
showCloseButton	true	Toggle close button
showNavArrows	true	Toggle navigation arrows
enableEscapeButton	true	Toggle if pressing Esc button closes FancyBox
onStart	null	Will be called right before attempting to load the content
onCancel	null	Will be called after loading is canceled
onComplete	null	Will be called once the content is displayed
onCleanup	null	Will be called just before closing
onClosed	null	Will be called once FancyBox is closed

Key	Description
type	Forces content type. Can be set to 'image', 'ajax', 'iframe', 'swf' or 'inline'
href	Forces content source
title	Forces title
content	Forces content (can be any html data)
orig	Sets object whos position and dimensions will be used by 'elastic' transition
index	Custom start index of manually created gallery (since 1.3.1)

FancyBox provides some function to work with it

Method	Description
$.fancybox.showActivity	Shows loading animation
$.fancybox.hideActivity	Hides loading animation
$.fancybox.next	Displays the next gallery item
$.fancybox.prev	Displays the previous gallery item
$.fancybox.pos	Displays item by index from gallery
$.fancybox.cancel	Cancels loading content
$.fancybox.close	Hides FancyBox  Within an iframe use - parent.$.fancybox.close();
$.fancybox.resize	Auto-resizes FancyBox height to match height of content
$.fancybox.center	Centers FancyBox in viewport

7. Custom title formating - lightbox style

JavaScript

function formatTitle(title, currentArray, currentIndex, currentOpts) {
    return '<div id="tip7-title"><span><a href="javascript:;" onclick="$.fancybox.close();"><img src="/data/closelabel.gif" /></a></span>' + (title && title.length ? '<b>' + title + '</b>' : '' ) + 'Image ' + (currentIndex + 1) + ' of ' + currentArray.length + '</div>';
}

$(".tip7").fancybox({
	'showCloseButton'	: false,
	'titlePosition' 		: 'inside',
	'titleFormat'		: formatTitle
});

CSS

#tip7-title { text-align: left; }

#tip7-title b { display: block; margin-right: 80px; }

#tip7-title span { float: right; }

Example 
 

6. Start FancyBox on page load

If you have attached FancyBox than you can trigger click method

jQuery(document).ready(function() {
    $("#your_selector").trigger('click');
});

Alternative method is to use manual call

jQuery(document).ready(function() {
	$.fancybox(
		'<h2>Hi!</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis mi eu elit tempor facilisis id et neque</p>',
		{
        		'autoDimensions'	: false,
			'width'         		: 350,
			'height'        		: 'auto',
			'transitionIn'		: 'none',
			'transitionOut'		: 'none'
		}
	);
});

5. Display login form Try now

Sample HTML form:

<div style="display:none">
	<form id="login_form" method="post" action="">
	    	<p id="login_error">Please, enter data</p>
		<p>
			<label for="login_name">Login: </label>
			<input type="text" id="login_name" name="login_name" size="30" />
		</p>
		<p>
			<label for="login_pass">Password: </label>
			<input type="password" id="login_pass" name="login_pass" size="30" />
		</p>
		<p>
			<input type="submit" value="Login" />
		</p>
		<p>
		    <em>Leave empty so see resizing</em>
		</p>
	</form>
</div>

Attach FancyBox:

$("#tip5").fancybox({
	'scrolling'		: 'no',
	'titleShow'		: false,
	'onClosed'		: function() {
	    $("#login_error").hide();
	}
});

Simple validation; submit data using Ajax and display response

$("#login_form").bind("submit", function() {

	if ($("#login_name").val().length < 1 || $("#login_pass").val().length < 1) {
	    $("#login_error").show();
	    $.fancybox.resize();
	    return false;
	}

	$.fancybox.showActivity();

	$.ajax({
		type		: "POST",
		cache	: false,
		url		: "/data/login.php",
		data		: $(this).serializeArray(),
		success: function(data) {
			$.fancybox(data);
		}
	});

	return false;
});

4. Show youtube clips. Try now

This script also enables full screen mode if video's href has the parameter &fs=1

$("#tip4").click(function() {
	$.fancybox({
			'padding'		: 0,
			'autoScale'		: false,
			'transitionIn'	: 'none',
			'transitionOut'	: 'none',
			'title'			: this.title,
			'width'		: 680,
			'height'		: 495,
			'href'			: this.href.replace(new RegExp("watch\\?v=", "i"), 'v/'),
			'type'			: 'swf',
			'swf'			: {
			   	 'wmode'		: 'transparent',
				'allowfullscreen'	: 'true'
			}
		});

	return false;
});

3. Show/hide title on hover. Try now

$("#tip3").fancybox({
	'titlePosition'	:	'over',
	'onComplete'	:	function() {
		$("#fancybox-wrap").hover(function() {
			$("#fancybox-title").show();
		}, function() {
			$("#fancybox-title").hide();
		});
	}
});

2. Select all anchor tags that contain image tags

$("a:has(img)").fancybox();

Alternative method - apply Fancybox to only those <a> tags that have href attributes that end with .jpg, .png or .gif:

$("a[href$='.jpg'],a[href$='.png'],a[href$='.gif']").fancybox();

1. Create gallery from jQuery object collection

$("a.fancybox").attr('rel', 'gallery').fancybox();

fancybox 가 버젼2로 업데이트 되면서 혹시나 없어질지도 몰라 따로 포스팅해놓음