FancyBox is a tool for displaying images, html content and multi-media in a Mac-style "lightbox" that floats overtop of web page. 

 

Features

• Can display images, HTML elements, SWF movies, Iframes and also Ajax requests
• Customizable through settings and CSS
• Groups related items and adds navigation.
• If the mouse wheel plugin is included in the page then FancyBox will respond to mouse wheel events as well
• Support fancy transitions by using easing plugin
• Adds a nice drop shadow under the zoomed item

How to use

1. First, make sure you are using valid

This is required for FancyBox to look and function correctly.

2. Include necessary JS files

Loading jQuery from CDN (Content Delivery Network) is recommended

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>

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

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

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

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

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

3. Add FancyBox CSS file

Don`t forget to change background image paths if CSS file is not in the same directory.

Also, check src paths for AlphaImageLoader as they are relative to the HTML document, while regular CSS background images are relative to the CSS document (read more).

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

4. 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>

<div style="display:none"><div id="data">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div></div>

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)

5. 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
	});

	/* Apply fancybox to multiple items */
	
	$("a.group").fancybox({
		'transitionIn'	:	'elastic',
		'transitionOut'	:	'elastic',
		'speedIn'		:	600, 
		'speedOut'		:	200, 
		'overlayShow'	:	false
	});
	
});

Note - ID's are meant for a SINGLE instance. If you want to use the same script for all your images/elements then use classes instead.

Note - Galleries are created from elements who have the same "rel" tag, example:

/* HTML */
<a class="grouped_elements" rel="group1" href="image_big_1.jpg"><img src="image_small_1.jpg" alt=""/></a>
<a class="grouped_elements" rel="group1" href="image_big_2.jpg"><img src="image_small_2.jpg" alt=""/></a> 	

<a class="grouped_elements" rel="group2" href="image_big_3.jpg"><img src="image_small_3.jpg" alt=""/></a> 
<a class="grouped_elements" rel="group2" href="image_big_4.jpg"><img src="image_small_4.jpg" alt=""/></a> 

/* This will create two galleries */
	
$("a.grouped_elements").fancybox();