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();