jquery 灯箱插件 fancybox 1.x

分类 plug-in 367阅读阅读模式

首先,看 demo 演示

最简单的示例,如下:

1、引入 js 文件及 css 文件

  1. <script type="text/javascript" src="jquery-1.4.3.min.js"></script>
  2. <script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
  3. <link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />

1.1、可选,添加 jQuery 动画支持

  1. <script type="text/javascript" src="/fancybox/jquery.easing-1.4.pack.js"></script>

1.2、可选,添加滚轮支持

  1. <script type="text/javascript" src="/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>

2、js部分,调用 fancybox

  1. $(document).ready(function() {
  2. $("a.exampleclass").fancybox();
  3. })

 

3、html 部分,引入图片

  1. <a class="exampleclass" href="1.jpg"><img alt="1" src="1.jpg" /></a>

 

效果:包含 exampleclass 类名的图片,点击会弹窗显示。

 

拓展部分:

如果同一页面,同时有多个相册,则如下写法:

  1. <!-- 图册一 -->
  2. <a class="example-group" rel="group-a" href="./a1.jpg" title="a1"><img src="./a1.jpg" /></a>
  3. <a class="example-group" rel="group-a" href="./a2.jpg" title="a2"><img src="./a2.jpg" /></a>
  4. <a class="example-group" rel="group-a" href="./a3.jpg" title="a3"><img src="./a3.jpg" /></a>
  5. <!-- 图册二 -->
  6. <a class="example-group" rel="group-b" href="./b1.jpg" title="b1"><img src="./b1.jpg" /></a>
  7. <a class="example-group" rel="group-b" href="./b2.jpg" title="b2"><img src="./b2.jpg" /></a>
  8. <a class="example-group" rel="group-b" href="./b3.jpg" title="b3"><img src="./b3.jpg" /></a>
  9. <!-- 图册三 -->
  10. <a class="example-group" rel="group-c" href="./c1.jpg" title="c1"><img src="./c1.jpg" /></a>
  11. <a class="example-group" rel="group-c" href="./c2.jpg" title="c2"><img src="./c2.jpg" /></a>
  12. <a class="example-group" rel="group-c" href="./c3.jpg" title="c3"><img src="./c3.jpg" /></a>

 

js 改成

  1. $(document).ready(function() {
  2. $("a.example-group").fancybox({});
  3. });

tip:需要给每个图片 a 链接添加一个 example-group 的类名,同时每个图册的 rel 属性值保持一致,图册与图册的 rel 属性值不能相同。

 

更多 api 查看这里: fancybox 1.3x API

fancyBox 1.x 最后一个版本「1.3.4 版本」: 点击下载

相关文章

给我留言

  • 有人回复时邮件通知我