jQuery插件之Fancybox基本用法和api

官网：http://fancybox.net

基本用法：

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

原文地址：http://blog.sina.com.cn/s/blog_54254a8401014m0p.html