Jquery#fancyBox

fancyBox:

什么是fancyBox?

fancyBox是一个用来显示图像，html内容和多媒体的工具，其特征是这些元素漂浮在页面之上。

fancyBox构建在jQuery框架之上。

怎么使用?

1.首先，确保你使用的是有效的DOCTYPE.否则FancyBox将不能正常工作.

2.包含必需的JavaScript文件

(推荐从CDN(Content Delivery Network)加载jQuery)

<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>

jQuery库下载:http://code.jquery.com/jquery-1.8.3.min.js

fancyBox库下载:https://github.com/fancyapps/fancyBox/zipball/v2.1.3

3.添加图片超链接:

<a id="single_1" href="" title="">
	<img src="" alt="" />
</a>

超链接的href属性和图片的src属性一样，都是需要显示图片的路径。fancyBox需要id属性来指定位置。

4.调用fancyBox库函数

$(document).ready(function() {
	$(".single_1").fancybox();
});

5.看下效果:

推荐学习网站:http://fancyapps.com/fancybox/       http://fancybox.net/home