一个外国人写的jquery弹框插件，看他网站的alexa排名真高，应该是非常有名的弹框插件了。插件网站地址：http://fancy.klade.lv/home google code上的源码地址：http://code.google.com/p/fancybox/downloads/detail?name=jquery.fancybox-1.2.1.zip
可以弹出如下内容的窗口（注意：所有的触发弹框的dom必须是A这个标签，而且a中必须带有href属性，感觉有点局限性）
1、单个图片，（href属性就是一个图片的地址了，而且地址必须满足这个正则：/\.(jpg|gif|png|bmp|jpeg)(.*)?$/i，也就是必须是图片扩展名结尾的地址，这个限制太死了，不知道作者是怎么想的）；
2、一组图片，就是一个相册展示（和1差不多，但这组A中必须都有一个rel属性，而且所有的A的rel必须相同）；
3、弹出一个Dom的内容（href属性这样写：href=”#domid”，domid就是要弹出的dom的id；
4、用iframe显示一个链接，（href属性中必须带有iframe字样，或者有个叫iframe的class，不然是弹不出这个链接的内容的）；
5、用ajax请求一个连接的内容，然后显示，（href是一个可访问的链接即可，当然不要出现iframe字样，^_^）；
就这几种弹出的方式了，差不多可以满足平常的需求。
附上使用插件的方法和初始化的配置项：
1. Include nessesary JS files
<script type="text/javascript" src="path-to-file/jquery.js"></script>
<script type="text/javascript" src="path-to-file/jquery.fancybox.js"></script>
Optional, add if you wish to use fancy transitions as jQuery by default supports only “swing” and “linear”
<script type="text/javascript" src="path-to-file/jquery.easing.js"></script>
2. Add FancyBox CSS file
Don`t forget to change image paths if CSS file is not in the same directory as images used by FancyBox
<link rel="stylesheet" href="path-to-file/fancybox.css" type="text/css" media="screen">
3. Create a link element (<a href>)
For 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>
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 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)
4. Fire plugin using jQuery selector
If you are not familiar with jQuery, please, read at least 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({ 'hideOnContentClick': true }); $("a.group").fancybox({ 'zoomSpeedIn': 300, 'zoomSpeedOut': 300, 'overlayShow': false }); });
Galleries are created from found anchors who have the same “rel” tags
Available options
You can pass them as shown above or modify them at the bottom of FancyBox JS file
| padding |
Padding around content |
| imageScale |
If true, images are scaled to fit in viewport |
| zoomOpacity |
If true, changes content transparency when animating |
| zoomSpeedIn |
Speed in miliseconds of the zooming-in animation
(no animation if 0) |
| zoomSpeedOut |
Speed in miliseconds of the zooming-out animation
(no animation if 0) |
| zoomSpeedChange |
Speed in miliseconds of the animation when changing gallery items
(no animation if 0) |
| easingIn, easingOut, easingChange |
Easing used for animations |
| frameWidth |
Default width for iframed and inline content |
| frameHeight |
Default height for iframed and inline content |
| overlayShow |
If true, shows the overlay (false by default)
Overlay color is defined in CSS file |
| overlayOpacity |
Opacity of overlay (from 0 to 1) |
| hideOnContentClick |
Hides FancyBox when cliked on opened item |
| centerOnScroll |
If true, content is centered when user scrolls page |
| itemArray |
Optional, can set custom item array |
| callbackOnStart |
Optional, called on start |
| callbackOnShow |
Optional, called on displaying content |
| callbackOnClose |
Optional, called on close |
转一个作者网站上的常见问答：
4. How can I close FancyBox from other element? ?
Just call $.fn.fancybox.close() on your onClick event
