1. Include nessesary JS files

<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.1.pack.js"></script>

Optional - Add transitions as jQuery by default supports only "swing" and "linear"

<script type="text/javascript" src="/fancybox/jquery.easing-1.3.pack.js"></script>

Optional - Enable "mouse-wheel" to navigate throught gallery items

<script type="text/javascript" src="/fancybox/jquery.mousewheel-3.0.2.pack.js"></script>

2. Add FancyBox CSS file

Don`t forget to change image paths if CSS file is not in the same directory as images used by FancyBox

<link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.1.css" type="text/css" media="screen">

3. Create a link element (<a href>)

Images

<a id="single_image" href="image_big.jpg"><img src="image_small.jpg" alt=""/></a>

Inline content

<a id="inline" href="#data">This shows content of element who has id="data"</a>

Iframe

<a href="http://www.example?iframe">This goes to iframe</a>

or

<a class="iframe" href="http://www.example">This goes to iframe</a>

Ajax

<a href="http://www.example/data.php">This takes content using ajax</a>

Optional - Use the title attribute for anchors if you want to show a caption

Note - You may want to set hideOnContentClick to false if you display iframed or inline content and it containts clickable elements (for example - play buttons for movies, links to other pages)

4. Fire plugin using jQuery selector

If you are not familiar with jQuery, please, read this tutorial for beginners

Sample examples:

$(document).ready(function() {

	/* This is basic - uses default settings */
	
	$("a#single_image").fancybox();
	
	/* Using custom settings */
	
	$("a#inline").fancybox({
		'hideOnContentClick': true
	});

	$("a.group").fancybox({
		'speedIn'		:	600, 
		'speedOut'		:	200, 
		'overlayShow'	:	false
	});
});

Galleries are created from found anchors who have the same "rel" tags