7. Custom title formating - lightbox style

JavaScript

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

		$(".tip7").fancyboxPlus({
		'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() {
		$.fancyboxPlus(
		'<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").fancyboxPlus({
	'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();
	$.fancyboxPlus.resize();
	return false;
	}

	$.fancyboxPlus.showActivity();

	$.ajax({
	type		: "POST",
	cache	: false,
	url		: "/data/login.php",
	data		: $(this).serializeArray(),
	success: function(data) {
	$.fancyboxPlus(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() {
	$.fancyboxPlus({
	'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").fancyboxPlus({
	'titlePosition'	:	'over',
	'onComplete'	:	function() {
	$("#fbplus-wrap").hover(function() {
	$("#fbplus-title").show();
	}, function() {
	$("#fbplus-title").hide();
	});
	}
	});

2. Select all anchor tags that contain image tags

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

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']").fancyboxPlus();

1. Create gallery from jQuery object collection

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