首先,看 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 版本」: 点击下载