http://www.fancyapps.com/fancybox/#examples

fancyBox

fancyBox is a tool that offers a nice and elegant way to add zooming functionality for images, html content and multi-media on your webpages. It is built at the top of the popular JavaScript framework jQuery and is both easy to implement and a snap to customize.

What's new

Version 2 is completely rewritten with new features and updated graphics.

Notable changes

Road Map

Instructions

Download the plugin, unzip it, copy files and include fancyBox script and stylesheet in your document (you will need to make sure the css and js files are on your server, and adjust the paths in the script and link tag). Make sure you also load the jQuery library. Example: 

<!-- Add jQuery library -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>

<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="/fancybox/lib/jquery.mousewheel-3.0.6.pack.js"></script>

<!-- Add fancyBox -->
<link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.0.4" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.0.4"></script>

<!-- Optionaly add button and/or thumbnail helpers -->
<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-buttons.css?v=2.0.4" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-buttons.js?v=2.0.4"></script>

<link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=2.0.4" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=2.0.4"></script>

Create link elements whose href attributes will contain the path of the element you wish to open within the fancyBox.

<a class="fancybox" rel="group" href="big_image_1.jpg"><img src="small_image_1.jpg" alt="" /></a>

<a class="fancybox" rel="group" href="big_image_2.jpg"><img src="small_image_2.jpg" alt="" /></a>

Attach fancyBox when the document is loaded. If you are not familiar with jQuery, please, read this tutorial for beginners.

<script type="text/javascript">
	$(document).ready(function() {
		$(".fancybox").fancybox();
	});
</script>

Examples

You can also go straight into action and open a standalone version of demo and view its source code.

Note: ID's are single use and are only applied to one element.
Galleries are created from elements who have the same "data-fancybox-group" or "rel" attribute value.

fancyBox will try to guess content type from href attribute but you can specify it directly by adding classname (fancybox.image, fancybox.iframe, etc).
Example: <a class="fancybox.iframe" href="http://jquery.com">Open iframe</a>

Extended functionality

License / Download

fancyBox licensed under Creative Commons Attribution-NonCommercial 3.0 license.
You are free to use fancyBox for your personal or non-profit website projects.
You can get the author's permission to use fancyBox for commercial websites by paying a fee.

The latest source code is available on GitHub.

Download v2.0.4 Licenses & Pricing

Documentation

You can pass these options as key/value object to fancybox() method. It is alos possible to modify defaults directly at fancyBox JS file or $.fancybox.defaults

Name Description
padding Space inside fancyBox around content
margin Minimum space between viewport and fancyBox. Can be set as array - [top, right, bottom, left]. Right and bottom margins are ignored if content dimensions exceeds viewport
width Default width for 'iframe' and 'swf' content. Also for 'inline', 'ajax' and 'html' if 'autoSize' is set to 'false'
height Default height for 'iframe' and 'swf' content. Also for 'inline', 'ajax' and 'html' if 'autoSize' is set to 'false'
minWidth Minimum width fancyBox should be allowed to resize to
minHeight Minimum height fancyBox should be allowed to resize to
maxWidth Maximum width fancyBox should be allowed to resize to
maxHeight Maximum height fancyBox should be allowed to resize to
autoSize If set to true, for 'inline', 'ajax' and 'html' type content width/height is auto determined. If no dimensions set this may give unexpected results
fitToView If set to true, fancyBox is resized to fit inside viewport
aspectRatio If set to true, resizing is constrained by the original aspect ratio (images always keep ratio)
topRatio Top space ratio for vertical centering. If set to 0.5 than vertical and bottom spece will be equal. If 0 - fancyBox will be at the viewport top
fixed If set to true, fancyBox position will be changed to 'fixed' if it fits inside viewport
scrolling Set the overflow CSS property to create or hide scrollbars. Can be set to 'auto', 'yes' or 'no'
wrapCSS Customizable CSS class for wrapping element (great for custom styling)
arrows If set to true, navigation arrows will be displayed
closeBtn If set to true, close button will be displayed
closeClick If set to true, fancyBox will be closed when user clicks the content
nextClick If set to true, will navigate to next gallery item when user clicks the content
mouseWheel If set to true, you will be able to navigate gallery using the mouse wheel
loop If set to true, enables cyclic navigation. This means, if you click "next" after you reach the last element, first element will be displayed (and vice versa).
ajax Options for ajax request
keys Define keyboard keys for gallery navigation and closing
modal If set to true, will disable navigation and closing
autoPlay If set to true, slideshow will start after opening the first gallery item
playSpeed Slideshow speed in milliseconds
index Overrides group start index
type Overrides type for content
href Overrides content source link
content Overrides content to be displayed
title Overrides title
tpl Object containing various templates
openEffect / closeEffect / nextEffect / prevEffect Animation effect ('elastic', 'fade' or 'none') for each transition type
openSpeed / closeSpeed / nextSpeed / prevSpeed The time it takes (in ms, or "slow", "normal", "fast") to complete transition
openEasing / closeEasing / nextEasing / prevEasing Easing method for each transition type. You have numerous choices if easing plugin is included
openOpacity / closeOpacity If set to true, transparency is changed for elastic transitions
openMethod / closeMethod / nextMethod / prevMethod Method from $.fancybox.transitions() that handles transition (you can add custom effects there)
helpers Object containing options for enabled helpers

The plugin comes with a number of public functions to help you utilize the plugin in a number of different scenarios. Each of these functions can be called as a property of the $.fancybox object.
To use from inside the iframe - <a href="javascript:parent.$.fancybox.close();">Close me</a>

Name Description
open

$.fancybox.open( [group], [options] )

Launch fancyBox, the same as $.fancybox([group], [options])
First parameter can be in various types, examples:
$.fancybox([ {href : 'img1.jpg', title : 'Title'}, {href : 'img2.jpg', title : 'Title'} ]); - array containing objects
$.fancybox( {href : 'image.jpg', title : 'Lorem lipsum'} ); - single object
$.fancybox( ['image.jpg', 'image.jpg'] ); - array containing links as strings
$.fancybox( 'image.jpg' ); - string as source link
$.fancybox( [jQuery object] );
$.fancybox( '<h1>Lorem lipsum</h1>' );
cancel

$.fancybox.cancel()

Cancel loading image or abort ajax request
close

$.fancybox.close( [force] )

If fancyBox is fully opened (open animation has ended) then start closing animation. If not or closing is forced (e.g. called like $.fancybox.close( true )) than fancyBox is removed immediatly
play

$.fancybox.play()

Start or stop (if already running) slideshow
next

$.fancybox.next()

Navigate to next gallery item
prev

$.fancybox.prev()

Navigate to previous gallery item
jumpto

$.fancybox.jumpto( [index] )

Navigate to gallery item by index. Item counting starts from 0, e.g. $.fancybox.jumpto( 0 ); will open the first, e.g. $.fancybox.jumpto( 1 ); will second, etc
reposition

$.fancybox.reposition()

Will center fancyBox inside viewport and toggle position type to fixed or absolute if needed
update

$.fancybox.update()

Auto-sizes fancyBox height to match height of content
toggle

$.fancybox.toggle()

If content is resized to fit inside viewport than it will be expanded to full size (and vice verse)
showLoading

$.fancybox.showLoading()

Shows loading animation
hideLoading

$.fancybox.hideLoading()

Hides loading animation

Also available are event driven callback methods, allowing you to extend functionality:

Name Description
onCancel Called after user triggers canceling.
Note: If false is returned by the callback, the canceling will be halted
beforeLoad Called before starting to load content.
Note: If false is returned by the callback, the loading will be halted
afterLoad Called after content is loaded.
Note: If false is returned by the callback, the content will not be shown.
beforeShow Called right before open animations has started
afterShow Called after open animations has ended
beforeClose Called right after closing has been triggered but not yet started
Note: If false is returned by the callback, the closing will be halted.
afterClose Called after closing animation has ended
onUpdate Called after window resize, scroll or orientation change events are triggered
onPlayStart Called after slideshdow has started
onPlayEnd Called after slideshdow has stoped

Support

You can ask a questions using the StackOverflow site where you are most likely to get answer quickly as many Javascript experts spend time on the site. Make sure you add the tags "jquery" and "fancybox" when posting.

If you run into an issue and need to report a bug, please create an issue on GitHub issues and I will investigate.

Follow @thefancyapps for the latest updates.

1. It doesn't work at all. The image opens up in a new page. What's wrong?

Check if you have included all files and set up FancyBox correctly

2. Can a FancyBox appear over the top of my Flash content?

Yes, read this explanation

3. Can the script be called from an iframe?

This is not supported as FancyBox is attached to page body. You can modify FancyBox source to suit your needs

4. How can I close FancyBox from other element? ?

Just call $.fancybox.close() on your onClick event

5. I`m using custom urls for images (for example, index.php?action=image&id=123) and FancyBox shows source of image. Why?

FancyBox gueses content type from url but sometimes it can be wrong. The solution is to force your type, like so - $(".selector").fancybox({'type' : 'image'});

(required version 1.3+)

6. FancyBox is not working on all images, only first one opens. What's wrong?

If you are using ID as selector $("#selector").fancybox(); then switch to classes - $(".selector").fancybox();

Back to the top