fancybox

Home

How to use

API & Options

How to use
1. First, make sure you are using valid DOCTY PE

Tips & Tricks

FAQ

Support

Download fancyBox2 from

http://fancyapps.com

Past Release
Version 1.3.4 (2010/11/11)

This is required for FancyBox to look and function correctly.

Changelog

Donate
2. Include necessary JS files

Loading jQuery from CDN (Content Delivery Netw ork) is recommended

Our Sponsors

<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 "sw ing" and "linear"

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

Optional - Enable "mouse-w heel" 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, w hile 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 w ant to show a caption
Note - You may w ant 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 w ith 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({
'hideOnC ontentC lick': 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 w ant to use the same script for all

your images/elements then use classes instead.

Note - Galleries are created from elements w ho 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();

C ontact: info [at] fancybox [dot] net

(c) 2008 - 2014 / fancybox.net

/please, don`t send emails for help, use support forum instead