首先，看 demo 演示。
最简单的示例，如下：
1、引入 js 文件及 css 文件
- <script type="text/javascript" src="jquery-1.4.3.min.js"></script>
- <script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
- <link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
1.1、可选，添加 jQuery 动画支持
- <script type="text/javascript" src="/fancybox/jquery.easing-1.4.pack.js"></script>
1.2、可选，添加滚轮支持
- <script type="text/javascript" src="/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
2、js部分，调用 fancybox
- $(document).ready(function() {
- $("a.exampleclass").fancybox();
- })
3、html 部分，引入图片
- <a class="exampleclass" href="1.jpg"><img alt="1" src="1.jpg" /></a>
效果：包含 exampleclass 类名的图片，点击会弹窗显示。
拓展部分：
如果同一页面，同时有多个相册，则如下写法：
- <!-- 图册一 -->
- <a class="example-group" rel="group-a" href="./a1.jpg" title="a1"><img src="./a1.jpg" /></a>
- <a class="example-group" rel="group-a" href="./a2.jpg" title="a2"><img src="./a2.jpg" /></a>
- <a class="example-group" rel="group-a" href="./a3.jpg" title="a3"><img src="./a3.jpg" /></a>
- <!-- 图册二 -->
- <a class="example-group" rel="group-b" href="./b1.jpg" title="b1"><img src="./b1.jpg" /></a>
- <a class="example-group" rel="group-b" href="./b2.jpg" title="b2"><img src="./b2.jpg" /></a>
- <a class="example-group" rel="group-b" href="./b3.jpg" title="b3"><img src="./b3.jpg" /></a>
- <!-- 图册三 -->
- <a class="example-group" rel="group-c" href="./c1.jpg" title="c1"><img src="./c1.jpg" /></a>
- <a class="example-group" rel="group-c" href="./c2.jpg" title="c2"><img src="./c2.jpg" /></a>
- <a class="example-group" rel="group-c" href="./c3.jpg" title="c3"><img src="./c3.jpg" /></a>
js 改成
- $(document).ready(function() {
- $("a.example-group").fancybox({});
- });
tip：需要给每个图片 a 链接添加一个 example-group 的类名，同时每个图册的 rel 属性值保持一致，图册与图册的 rel 属性值不能相同。
更多 api 查看这里： fancybox 1.3x API
fancyBox 1.x 最后一个版本「1.3.4 版本」： 点击下载