个人知识网

1、在http://fancybox.net/下载最新版

懒人直接点击下载连接：

http://fancybox.googlecode.com/files/jquery.fancybox-1.3.4.zip

2、下载下来的fancybox目录放在自己网站的根目录下。

在html中添加：

<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>
还有fancybox的CSS文件：
<link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />

3、写一个测试页来测试一下效果：
 <a href="http://www.zhukunqian.com/image/855788_20110410143732140.jpg">
  <img src="http://www.zhukunqian.com/image/855788_20110410143732140.jpg" />
 </a>

然后在html的body前添加:
<script type="text/javascript">
 $(function() {
 $('a.single_image').fancybox();
 });
 </script>

OK，现在可以看到效果了。

4、如果遇到错误：
$ is not defined
这是因为jquery.min.js文件没有正常加入。

d.onCleanup is not a function
这是因为没有将fancy的css文件加入。