基本用法:
1. First, make sure you are using valid DOCTYPE
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() {
$("a#single_image").fancybox();
$("a#inline").fancybox({
'hideOnContentClick': true
});
$("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:
<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>
$("a.grouped_elements").fancybox();
API和选项:
You can pass options as key/value object to fancybox() function or modify them at the bottom of FancyBox JS file. These are options for 1.3+, for versions 1.2+ look there.
Key | Default value | Description |
---|---|---|
padding | 10 | Space between FancyBox wrapper and content |
margin | 20 | Space between viewport and FancyBox wrapper |
opacity | false | When true, transparency of content is changed for elastic transitions |
modal | false | When true, 'overlayShow' is set to 'true' and 'hideOnOverlayClick', 'hideOnContentClick', 'enableEscapeButton', 'showCloseButton' are set to 'false' |
cyclic | false | When true, galleries will be cyclic, allowing you to keep pressing next/back. |
scrolling | 'auto' | Set the overflow CSS property to create or hide scrollbars. Can be set to 'auto', 'yes', or 'no' |
width | 560 | Width for content types 'iframe' and 'swf'. Also set for inline content if 'autoDimensions' is set to 'false' |
height | 340 | Height for content types 'iframe' and 'swf'. Also set for inline content if 'autoDimensions' is set to 'false' |
autoScale | true | If true, FancyBox is scaled to fit in viewport |
autoDimensions | true | For inline and ajax views, resizes the view to the element recieves. Make sure it has dimensions otherwise this will give unexpected results |
centerOnScroll | false | When true, FancyBox is centered while scrolling page |
ajax | { } | Ajax options Note: 'error' and 'success' will be overwritten by FancyBox |
swf | {wmode: 'transparent'} | Params to put on the swf object |
hideOnOverlayClick | true | Toggle if clicking the overlay should close FancyBox |
hideOnContentClick | false | Toggle if clicking the content should close FancyBox |
overlayShow | true | Toggle overlay |
overlayOpacity | 0.3 | Opacity of the overlay (from 0 to 1; default - 0.3) |
overlayColor | '#666' | Color of the overlay |
titleShow | true | Toggle title |
titlePosition | 'outside' | The position of title. Can be set to 'outside', 'inside' or 'over' |
titleFormat | null | Callback to customize title area. You can set any html - custom image counter or even custom navigation |
transitionIn, transitionOut | 'fade' | The transition type. Can be set to 'elastic', 'fade' or 'none' |
speedIn, speedOut | 300 | Speed of the fade and elastic transitions, in milliseconds |
changeSpeed | 300 | Speed of resizing when changing gallery items, in milliseconds |
changeFade | 'fast' | Speed of the content fading while changing gallery items |
easingIn, easingOut | 'swing' | Easing used for elastic animations |
showCloseButton | true | Toggle close button |
showNavArrows | true | Toggle navigation arrows |
enableEscapeButton | true | Toggle if pressing Esc button closes FancyBox |
onStart | null | Will be called right before attempting to load the content |
onCancel | null | Will be called after loading is canceled |
onComplete | null | Will be called once the content is displayed |
onCleanup | null | Will be called just before closing |
onClosed | null | Will be called once FancyBox is closed |
Advanced options
Key | Description |
---|---|
type | Forces content type. Can be set to 'image', 'ajax', 'iframe', 'swf' or 'inline' |
href | Forces content source |
title | Forces title |
content | Forces content (can be any html data) |
orig | Sets object whos position and dimensions will be used by 'elastic' transition |
index | Custom start index of manually created gallery (since 1.3.1) |
Public Methods
FancyBox provides some function to work with it
Method | Description |
---|---|
$.fancybox.showActivity | Shows loading animation |
$.fancybox.hideActivity | Hides loading animation |
$.fancybox.next | Displays the next gallery item |
$.fancybox.prev | Displays the previous gallery item |
$.fancybox.pos | Displays item by index from gallery |
$.fancybox.cancel | Cancels loading content |
$.fancybox.close | Hides FancyBox Within an iframe use - parent.$.fancybox.close(); |
$.fancybox.resize | Auto-resizes FancyBox height to match height of content |
$.fancybox.center | Centers FancyBox in viewport |