非常酷的jquery弹框插件:FancyBox

一个外国人写的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

标签: fancybox

添加新评论