# fancyBox- Fancy jQuery Lightbox Alternative

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 on the top of the popular JavaScript framework jQuery and is both easy to implement and a snap to customize.

Tweet

- what`s new
- instructions
- tips & tricks
- examples
- license & download
- documentation
- support

## What's new

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

### Notable changes

- Extendable using helpers
- Responsive (try resizing window while fancyBox is open)
- Integrated slideshow
- New gallery transitions
- Uses CSS3 (shadows, round corners)
- Updated plugin options (not compatible with previous versions)
- Now licensed under Creative Commons Attribution-NonCommercial 3.0

## 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="http://code.jquery.com/jquery-latest.min.js"></script>

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

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

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

    <link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
    <script type="text/javascript" src="/new-site/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></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>

## Tips & tricks

A collection of the demos created in response to questions

1. Change overlay color and opacity
2. Title -
   - Use different attribute as value
   - Get thumbnail "alt" attribute and use it
   - Use element instead of attribute
   - Change title type
   - Disable title
   - Set title at the top
   - Add something to the title (add download link)
   - Stretch and show/hide on mouse hover
3. Disable right click (add watermark)
4. Remove white border around content
5. Move navigation arrows outside -
   - For all items
   - Only for type "iframe"
6. Customize/change the content -
   - Social buttons (twitter and fb)
   - Add custom icon (full-screen)
   - Append custom content
   - Use 3rd party script (query-Oembed-All) to embed content from other website
7. Fade content when changing gallery items
8. Apply fancyBox on all images
9. Start the gallery with only one preview picture:
   - Method one - Hide other images (multiple galleries)
   - Method two - Open fancyBox manually (multiple galleries)
10. Launch fancyBox on page load:
    - Method one - Trigger one of the elements
    - Method two - Open fancyBox manually
11. Reload page after closing
12. Set parameters (like width and height) individually -
    - HTML5 data attributes
    - URL parameters
    - Metadata Plugin
    - Based on element ID
13. Supersized effect
14. Using YouTube API - go to the next video after the current one is finished playing
15. Open PDF (inside iframe)
16. Disable "locked" feature - the content is locked in the overlay by default
17. Simple "dotted" navigation

## Examples

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

- Single images
- HTML
- JavaScript

    <a id="single_1" href="http://farm1.staticflickr.com/291/18653638823_a86b58523c_b.jpg" title="Lupines (Kiddi Einars)">
    	<img src="http://farm1.staticflickr.com/291/18653638823_a86b58523c_m.jpg" alt="" />
    </a>
    <a id="single_2" href="http://farm4.staticflickr.com/3826/18875570170_e20cf27a4d_b.jpg" title="Colorful Feldberg II (STEFFEN EGLY)">
    	<img src="http://farm4.staticflickr.com/3826/18875570170_e20cf27a4d_m.jpg" alt="" />
    </a>
    <a id="single_3" href="http://farm1.staticflickr.com/471/19102574835_d5a7837217_b.jpg" title="Cannon Needles (JustinPoe)">
    	<img src="http://farm1.staticflickr.com/471/19102574835_d5a7837217_m.jpg" alt="" />
    </a>
    <a id="single_4" href="http://farm1.staticflickr.com/288/19353466834_6be3600330_b.jpg" title="Making a summer # 3 :) ((Nikon woman))">
    	<img src="http://farm1.staticflickr.com/288/19353466834_6be3600330_m.jpg" alt="" />
    </a>

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.

- Image gallery
- HTML
- JavaScript

    <a class="fancybox" rel="gallery1" href="http://farm1.staticflickr.com/313/19831416459_5ddd26103e_b.jpg" title="Sgwd Ddwli Uchaf, Brecon Waterfalls (technodean2000)">
    	<img src="http://farm1.staticflickr.com/313/19831416459_5ddd26103e_m.jpg" alt="" />
    </a>
    <a class="fancybox" rel="gallery1" href="http://farm6.staticflickr.com/5444/17679973232_568353a624_b.jpg" title="Golden Manarola (Sanjeev Deo)">
    	<img src="http://farm6.staticflickr.com/5444/17679973232_568353a624_m.jpg" alt="" />
    </a>
    <a class="fancybox" rel="gallery1" href="http://farm8.staticflickr.com/7367/16426879675_e32ac817a8_b.jpg" title="Codirosso spazzacamino (Massimo Greco _Foligno)">
    	<img src="http://farm8.staticflickr.com/7367/16426879675_e32ac817a8_m.jpg" alt="" />
    </a>
    <a class="fancybox" rel="gallery1" href="http://farm6.staticflickr.com/5612/15344856989_449794889d_b.jpg" title="Morning Twilight (Jose Hamra Images)">
    	<img src="http://farm6.staticflickr.com/5612/15344856989_449794889d_m.jpg" alt="" />
    </a>

Script uses the `href` or `data-fancybox-href` attribute of the matched elements to obtain the location of the content and to figure out content type you want to display. You can specify type directly by adding classname (fancybox.image, fancybox.iframe, etc) or `data-fancybox-type` attribute. Use `title` or `data-fancybox-title` attribute to specify item caption.

## Lorem ipsum dolor sit amet

Add new paragraph Close

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

- Various types
- HTML
- JavaScript

- Ajax
- Iframe
- Inline
- SWF

- Youtube (iframe)
- Google maps (iframe)
- Non-existing url

    <ul class="list">
    	<li>
    		<a class="various fancybox.ajax" href="/demo/ajax.php">Ajax</a>
    	</li>
    	<li>
    		<a class="various" data-fancybox-type="iframe" href="/demo/iframe.html">Iframe</a>
    	</li>
    	<li>
    		<a class="various" href="#inline">Inline</a>
    	</li>
    	<li>
    		<a class="various" href="http://www.adobe.com/jp/events/cs3_web_edition_tour/swfs/perform.swf">SWF</a>
    	</li>
    </ul>

    <ul class="list">
    	<li>
    		<a class="various fancybox.iframe" href="http://www.youtube.com/embed/L9szn1QQfas?autoplay=1">Youtube (iframe)</a>
    	</li>
    	<li>
    		<a class="various fancybox.iframe" href="http://maps.google.com/?output=embed&f=q&source=s_q&hl=en&geocode=&q=London+Eye,+County+Hall,+Westminster+Bridge+Road,+London,+United+Kingdom&hl=lv&ll=51.504155,-0.117749&spn=0.00571,0.016512&sll=56.879635,24.603189&sspn=10.280244,33.815918&vpsrc=6&hq=London+Eye&radius=15000&t=h&z=17">Google maps (iframe)</a>
    	</li>
    	<li>
    		<a class="various" href="/data/non_existing_image.jpg">Non-existing url</a>
    	</li>
    </ul>

Alternatively, you can set content type as an option: `$(".open_ajax").fancybox({type: 'ajax'});`.

Note, ajax requests are subject to the same origin policy. If fancyBox will not be able to get content type, it will try to guess based on 'href' and will quit silently if would not succeed (this is different from previous versions where 'ajax' was used as default type or an error message was displayed).

### Extended functionality

Remember to include the necessary files! Each helper is located in separate files.

- Button helper
- HTML
- JavaScript

    <a class="fancybox-button" rel="fancybox-button" href="http://farm8.staticflickr.com/7308/15783866983_27160395b9_b.jpg" title="Rodeo Dusk (_JonathanMitchellPhotography_)">
    	<img src="http://farm8.staticflickr.com/7308/15783866983_27160395b9_m.jpg" alt="" />
    </a>
    <a class="fancybox-button" rel="fancybox-button" href="http://farm3.staticflickr.com/2880/10346743894_0cfda8ff7a_b.jpg" title="Les papillons ont du chagrin (JMS')">
    	<img src="http://farm3.staticflickr.com/2880/10346743894_0cfda8ff7a_m.jpg" alt="" />
    </a>
    <a class="fancybox-button" rel="fancybox-button" href="http://farm4.staticflickr.com/3857/14395875498_c43e5c4415_b.jpg" title="Chedder Gorge with goats looking (Si Photography)">
    	<img src="http://farm4.staticflickr.com/3857/14395875498_c43e5c4415_m.jpg" alt="" />
    </a>
    <a class="fancybox-button" rel="fancybox-button" href="http://farm8.staticflickr.com/7475/15723733583_b4a7b52459_b.jpg" title="Pudacuo (OsvinC)">
    	<img src="http://farm8.staticflickr.com/7475/15723733583_b4a7b52459_m.jpg" alt="" />
    </a>

- Thumbnail helper
- HTML
- JavaScript

    <a class="fancybox-thumb" rel="fancybox-thumb" href="http://farm8.staticflickr.com/7495/16346747871_60b27a54b9_b.jpg" title="Bråviken (jarnasen)">
    	<img src="http://farm8.staticflickr.com/7495/16346747871_60b27a54b9_m.jpg" alt="" />
    </a>
    <a class="fancybox-thumb" rel="fancybox-thumb" href="http://farm8.staticflickr.com/7381/16327260776_c3fa8ee76d_b.jpg" title="From the garden (*Jilltoo)">
    	<img src="http://farm8.staticflickr.com/7381/16327260776_c3fa8ee76d_m.jpg" alt="" />
    </a>
    <a class="fancybox-thumb" rel="fancybox-thumb" href="http://farm9.staticflickr.com/8591/16141566979_347348e72c_b.jpg" title="cold forest (picturesbywalther)">
    	<img src="http://farm9.staticflickr.com/8591/16141566979_347348e72c_m.jpg" alt="" />
    </a>
    <a class="fancybox-thumb" rel="fancybox-thumb" href="http://farm3.staticflickr.com/2895/14503817856_2f5d4b667b_b.jpg" title="Holly blue (Masa_N)">
    	<img src="http://farm3.staticflickr.com/2895/14503817856_2f5d4b667b_m.jpg" alt="" />
    </a>

- Media helper
- HTML
- JavaScript

- Youtube
- Vimeo
- Metacafe
- Dailymotion
- Twitvid
- Twitpic
- Instagram
- Google maps
  - Search results
  - Direct link
  - Street view

    <ul class="list">
    	<li><a class="fancybox-media" href="http://www.youtube.com/watch?v=opj24KnzrWo">Youtube</a></li>
    	<li><a class="fancybox-media" href="http://vimeo.com/36031564">Vimeo</a></li>
    	<li><a class="fancybox-media" href="http://www.metacafe.com/watch/7635964/">Metacafe</a></li>
    	<li><a class="fancybox-media" href="http://www.dailymotion.com/video/xoeylt_electric-guest-this-head-i-hold_music">Dailymotion</a></li>
    	<li><a class="fancybox-media" href="http://twitvid.com/QY7MD">Twitvid</a></li>
    	<li><a class="fancybox-media" href="http://twitpic.com/7p93st">Twitpic</a></li>
    	<li><a class="fancybox-media" href="http://instagr.am/p/IejkuUGxQn">Instagram</a></li>
    	<li>
    		Google maps
    		<ul>
    			<li><a class="fancybox-media" href="http://maps.google.com/maps?q=Eiffel+Tower,+Avenue+Gustave+Eiffel,+Paris,+France&t=h&z=17">Search results</a></li>
    			<li><a class="fancybox-media" href="http://maps.google.com/?ll=48.85796,2.295231&spn=0.003833,0.010568&t=h&z=17">Direct link</a></li>
    			<li><a class="fancybox-media" href="http://maps.google.com/?ll=48.859463,2.292626&spn=0.000965,0.002642&t=m&z=19&layer=c&cbll=48.859524,2.292532&panoid=YJ0lq28OOy3VT2IqIuVY0g&cbp=12,151.58,,0,-15.56">Street view</a></li>
    		</ul>
    	</li>
    </ul>

## 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.1.5 View Licensing Options

## Documentation

- Available options
- API Methods
- Callbacks

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

Name | Description
--- | ---
padding | Space inside fancyBox around content. Can be set as array - [top, right, bottom, left]. Integer, Array; Default value: 15
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 Integer, Array; Default value: 20
width | Default width for 'iframe' and 'swf' content. Also for 'inline', 'ajax' and 'html' if 'autoSize' is set to 'false'. Can be numeric or 'auto'. Number, String; Default value: 800
height | Default height for 'iframe' and 'swf' content. Also for 'inline', 'ajax' and 'html' if 'autoSize' is set to 'false'. Can be numeric or 'auto' Number, String; Default value: 600
minWidth | Minimum width fancyBox should be allowed to resize to Number; Default value: 100
minHeight | Minimum height fancyBox should be allowed to resize to Number; Default value: 100
maxWidth | Maximum width fancyBox should be allowed to resize to Number; Default value: 9999
maxHeight | Maximum height fancyBox should be allowed to resize to Number; Default value: 9999
autoSize | If true, then sets both autoHeight and autoWidth to true Boolean; Default value: true
autoHeight | If set to true, for 'inline', 'ajax' and 'html' type content width is auto determined. If no dimensions set this may give unexpected results Boolean; Default value: false
autoWidth | If set to true, for 'inline', 'ajax' and 'html' type content height is auto determined. If no dimensions set this may give unexpected results Boolean; Default value: false
autoResize | If set to true, the content will be resized after window resize event Boolean; Default value: !isTouch
autoCenter | If set to true, the content will always be centered Boolean; Default value: !isTouch
fitToView | If set to true, fancyBox is resized to fit inside viewport before opening Boolean; Default value: true
aspectRatio | If set to true, resizing is constrained by the original aspect ratio (images always keep ratio; see this example - if you want to change ratio for other media) Boolean; Default value: false
topRatio | Top space ratio for vertical centering. If set to 0.5, then vertical and bottom space will be equal. If 0 - fancyBox will be at the viewport top Number; Default value: 0.5
leftRatio | Left space ratio for horizontal centering. If set to 0.5, then left and right space will be equal. If 0 - fancyBox will be at the viewport left Number; Default value: 0.5
scrolling | Set the overflow CSS property to create or hide scrollbars. Can be set to 'auto', 'yes', 'no' or 'visible' String; Default value: 'auto'
wrapCSS | Customizable CSS class for wrapping element (useful for custom styling) string; Default value:
arrows | If set to true, navigation arrows will be displayed Boolean; Default value: true
closeBtn | If set to true, close button will be displayed Boolean; Default value: true
closeClick | If set to true, fancyBox will be closed when user clicks the content Boolean; Default value: false
nextClick | If set to true, will navigate to next gallery item when user clicks the content Boolean; Default value: false
mouseWheel | If set to true, you will be able to navigate gallery using the mouse wheel Boolean; Default value: true
autoPlay | If set to true, slideshow will start after opening the first gallery item Boolean; Default value: false
playSpeed | Slideshow speed in milliseconds Integer; Default value: 3000
preload | Number of gallery images to preload Integer; Default value: 3
modal | If set to true, will disable navigation and closing Boolean; Default value: false
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). Boolean; Default value: true
ajax | Options for ajax request Object; Default value:
    {
    	dataType : 'html',
    	headers  : { 'X-fancyBox': true }
    }
iframe | Options for content type "iframe" Object; Default value:
    {
    	scrolling : 'auto',
    	preload   : true
    }
swf | Options for content type "swf" Object; Default value:
    {
    	wmode: 'transparent',
    	allowfullscreen   : 'true',
    	allowscriptaccess : 'always'
    }
keys | Define keyboard keys for gallery navigation, closing and slideshow Object; Default value:
    {
    	next : {
    		13 : 'left', // enter
    		34 : 'up',   // page down
    		39 : 'left', // right arrow
    		40 : 'up'    // down arrow
    	},
    	prev : {
    		8  : 'right',  // backspace
    		33 : 'down',   // page up
    		37 : 'right',  // left arrow
    		38 : 'down'    // up arrow
    	},
    	close  : [27], // escape key
    	play   : [32], // space - start/stop slideshow
    	toggle : [70]  // letter "f" - toggle fullscreen
    }
direction | Default navigation direction (for navigation arrows, too) Object; Default value:
    {
    	{
    		next : 'left',
    		prev : 'right'
    	}
    }
scrollOutside | If true, the script will try to avoid horizontal scrolling for iframes and html content Boolean; Default value: true
index | Overrides group start index Integer; Default value: 0
type | Overrides type for content. Supported types are 'image', 'inline', 'ajax', 'iframe', 'swf' and 'html' String; Default value: null
href | Overrides content source link String; Default value: null
content | Overrides content to be displayed String; Default value: null
title | Overrides title content, accepts any HTML String; Default value: null
tpl | Object containing various templates Object; Default value:
    {
    	wrap     : '<div class="fancybox-wrap" tabIndex="-1"><div class="fancybox-skin"><div class="fancybox-outer"><div class="fancybox-inner"></div></div></div></div>',
    	image    : '<img class="fancybox-image" src="{href}" alt="" />',
    	iframe   : '<iframe id="fancybox-frame{rnd}" name="fancybox-frame{rnd}" class="fancybox-iframe" frameborder="0" vspace="0" hspace="0"' + ($.browser.msie ? ' allowtransparency="true"' : '') + '></iframe>',
    	error    : '<p class="fancybox-error">The requested content cannot be loaded.<br/>Please try again later.</p>',
    	closeBtn : '<a title="Close" class="fancybox-item fancybox-close" href="javascript:;"></a>',
    	next     : '<a title="Next" class="fancybox-nav fancybox-next" href="javascript:;"><span></span></a>',
    	prev     : '<a title="Previous" class="fancybox-nav fancybox-prev" href="javascript:;"><span></span></a>'
    }
openEffect / closeEffect / nextEffect / prevEffect | Animation effect ('elastic', 'fade' or 'none') for each transition type String; Default value: 'fade', 'fade', 'elastic', 'elastic'
openSpeed / closeSpeed / nextSpeed / prevSpeed | The time it takes (in ms, or "slow", "normal", "fast") to complete transition Integer; Default value: 250
openEasing / closeEasing / nextEasing / prevEasing | Easing method for each transition type. You have numerous choices if easing plugin is included String; Default value: 'swing'
openOpacity / closeOpacity | If set to true, transparency is changed for elastic transitions Boolean; Default value: true
openMethod / closeMethod / nextMethod / prevMethod | Method from $.fancybox.transitions() that handles transition (you can add custom effects there) String; Default value: 'zoomIn' / 'zoomOut' / 'changeIn' / 'changeOut'
helpers | Object containing enabled helpers and options for each of them Object; Default value:
    {
    	overlay : {
    		closeClick : true,  // if true, fancyBox will be closed when user clicks on the overlay
    		speedOut   : 200,   // duration of fadeOut animation
    		showEarly  : true,  // indicates if should be opened immediately or wait until the content is ready
    		css        : {},    // custom CSS properties
    		locked     : true   // if true, the content will be locked into overlay
    	},
    	title : {
    		type : 'float' // 'float', 'inside', 'outside' or 'over'
    	}
    }
live | If set to true, fancyBox uses "live" to assign click event. Set to "false", if you need to apply only to current collection, e.g., if using something like -
    $("#page").children().filter('a').eq(0).fancybox();
Boolean; Default value: true
parent | Parent element of the container. This is useful for ASP.NET where the top element is "form" -
    $(".fancybox").fancybox({
        parent: "form:first" // jQuery selector
    });
String; Default value: body

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. Receives two arguments - upcoming and current object - http://jsfiddle.net/xW5gs/ 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

### Helpers

Helpers provide a simple mechanism to extend the capabilities of fancyBox. There are two built-in helpers - 'overlay' and 'title'. You can disable them, set custom options or enable other helpers. Examples:

    //Disable title helper
    $(".fancybox").fancybox({
        helpers:  {
            title:  null
        }
    });

    //Disable overlay helper
    $(".fancybox").fancybox({
        helpers:  {
            overlay : null
        }
    });

    //Change title position; show overlay after content has loaded
    $(".fancybox").fancybox({
        helpers:  {
            title : {
                type : 'inside'
            },
            overlay : {
                showEarly : false
            }
        }
    });

    //Enable thumbnail helper and set custom options
    $(".fancybox").fancybox({
        helpers:  {
            thumbs : {
                width: 50,
                height: 50
            }
        }
    });

### Options for thumbnail helper

Name | Description
--- | ---
width | Thumbnail width [Integer: 50]*/?>
height | Thumbnail height [Integer: 50]*/?>
source | Function to obtain the URL of the thumbnail image. By default, it uses the first image inside anchor or loads destination url instead. Examples: http://jsfiddle.net/PFVxK/, http://jsfiddle.net/2k8EP/ [Function: ]*/?>
position | 'top' or 'bottom' [Integer: 50]*/?>

### Options for button helper

Name | Description
--- | ---
tpl | HTML template [String: ]*/?>
position | 'top' or 'bottom' [Integer: 50]*/?>

## Support

- Help
- FAQ

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. But do not forget to check FAQ, first!

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.

Look for JavaScript error messages, they might help you to locate the problem.

If you see something like Uncaught TypeError: undefined is not a function:
1) Check if fancybox.js file is indeed loaded
2) Check if you have not included jQuery library more than once

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?

If all necessary files are included in the parent window, then you can, like:
<a href="javascript:parent.$.fancybox.open({href : 'myurl'});">Open something</a>

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, PHP created images - 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'});

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