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 版本」： 点击下载

共 1692字 © 本文由 大朗 撰写，转载请注明出处。

本文由大朗编写，如有错漏或其他不当，请在下方留言，欢迎指正。

永久固定短链接地址：https://www.darlang.com/?p=220 复制链接

赞 0

相关文章

给我留言

  • 有人回复时邮件通知我
© 2019 DarLang.com 粤ICP备15047962号 粤公网安备 44010602006221号 Powered by DarLang