jquery 灯箱插件 fancybox 2.x

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

首先，先上demo。

 

简单示例：

1、引入相关文件

  1. <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
  2. <link rel="stylesheet" href="/fancybox/source/jquery.fancybox.css?v=2.1.7" type="text/css" media="screen" />
  3. <script type="text/javascript" src="/fancybox/source/jquery.fancybox.pack.js?v=2.1.7"></script>

1.1、可选的插件 - 按钮

  1. <link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-buttons.css?v=1.0.5" type="text/css" media="screen" />
  2. <script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script>

1.2、可选的插件 - 媒体

  1. <script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-media.js?v=1.0.6"></script>

1.3、可选的插件 - 缩略图

  1. <link rel="stylesheet" href="/fancybox/source/helpers/jquery.fancybox-thumbs.css?v=1.0.7" type="text/css" media="screen" />
  2. <script type="text/javascript" src="/fancybox/source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script>

 

2、html 部分

  1. <a class="fancybox" rel="group" href="big_image_1.jpg"><img src="small_image_1.jpg" alt="" /></a>
  2. <a class="fancybox" rel="group" href="big_image_2.jpg"><img src="small_image_2.jpg" alt="" /></a>

 

3、js 部分

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

 

附上 API 表。

 

fancyBox -2.1.7 版本下载地址： 点击下载

 

完毕！

 

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

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

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

赞 0

相关文章

给我留言

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