jquery fancybox插件

最近工作项目中有用到这款插件，就查找了一下相关资料和用法，下面是一些基本的简单用法，比较容易掌握，有需要的小伙伴可以参考。：）

FancyBox是一款基于jquery开发的类Lightbox插件。支持对放大的图片添加阴影效果，对于一组相关的图片添加导航操作按纽，该lightbox除了能够展示图片之外，还可以展示iframed内容， 通过css自定义外观。

相对与Lightbox而言，阴影效果更好。但是比Lightbox绚丽。

可以到这里看演示效果：http://www.phpddt.com/demo/fancyBox/demo/index.html

使用方法

1 需要下载jquery--fancybox的文件，可以到这里下载http://fancyapps.com/fancybox/。

2 引入对应的js和css文件

<!--首先要引入jQuery库和fancybox插件库--><script type="text/javascript" src="../lib/jquery-1.10.1.min.js"></script><!--FancyBox核心js和css文件：--><script type="text/javascript" src="../source/jquery.fancybox.js"></script><link rel="stylesheet" type="text/css" href="../source/jquery.fancybox.css" media="screen" /><!--如果要实现图片滚轮效果，引入下面文件：--><script type="text/javascript" src="../lib/jquery.mousewheel-3.0.6.pack.js"></script><!--如果需要按钮效果，引入按钮css文件：--><link rel="stylesheet" type="text/css" href="../source/helpers/jquery.fancybox-buttons.css" /><script type="text/javascript" src="../source/helpers/jquery.fancybox-buttons.js"></script><!--如果要实现缩略图效果，引入：--><link rel="stylesheet" type="text/css" href="../source/helpers/jquery.fancybox-thumbs.css" /><script type="text/javascript" src="../source/helpers/jquery.fancybox-thumbs.js"></script><!--如果要动态加载媒体，引入：--><script type="text/javascript" src="../source/helpers/jquery.fancybox-media.js"></script><!--也可以通过easing插件实现fancy transitions 动画效果--><script type="text/javascript" src="../source/helpers/jquery.easing.js"></script>

 

3 创建一个链接元素

a链接的href可以指向图片和地址，a标签也可以包含图片、inline内容、iframe框架，例如

<!--图片--><a href="...jpg"><img src=""/></a><a href="http://...."><img src=""/></a><!--inline内容--><a href="#data">this shows content of element who has id="data"</a><!--iframe框架--><a href="http://www.example?iframe"></a>

 

4 调用fancybox功能

$(document).ready(function(){     $("a#element").fancybox();         //还可以修改fancybox中的某些参数，去设置自定义效果，例如：    $("a#element").fancybox({               'zoomSpeedIn': 300,         'zoomSpeedOut': 300,         'overlayShow': false     });    //或者     $('a.newBtn').each(function(index)    {        $(this).fancybox({            'width' : '95%',            'height' : '95%',            'type' : 'iframe',            'hideOnOverlayClick' : false,            'onCleanup' : function() { return confirm('Are you sure to close this dialog?All data will be lost if not save.');},            'onClosed' : function() { window.location.href = 'index.aspx';}        });    });    });

用rel标签来创建相册

<a class="grouped_elements" rel="group1" href="image_big_1.jpg"><img src="image_small_1.jpg" alt=""></a><a class="grouped_elements" rel="group1" href="image_big_2.jpg"><img src="image_small_2.jpg" alt=""></a>      <a class="grouped_elements" rel="group2" href="image_big_3.jpg"><img src="image_small_3.jpg" alt=""></a> <a class="grouped_elements" rel="group2" href="image_big_4.jpg"><img src="image_small_4.jpg" alt=""></a>  <script>$("a.grouped_elements").fancybox();</script>

 

5 fancybox中的一些常用参数

padding跟css里的padding差不多意思imageScale如果为true，则图片会被缩放以适应窗口zoomOpacity如果为true，则在动画过程中内容的透明度会改变overlayShow如果为true，则显示遮罩，默认为falseoverlayOpacity遮罩的透明度，值为0--1centerOnScroll值为true的话，当用户滚动页面时，内容会一直居中显示frameWidth/heightiframe和inline框口的默认宽度/高度zoomSpeedInzooming-in动画时的速度，单位为毫秒。0的话动画将不会出现zoomSpeedOutzooming-out动画时的速度，单位为毫秒。0的话动画将不会出现zoomSpeedChange切换图片时的动画速度，单位为毫秒。值为0的话将不会出现动画

         方法
         $.fancybox.showActivity 显示加载动画  
         $.fancybox.hideActivity 隐藏加载动画  
         $.fancybox.close 关闭窗口  
         $.fancybox.resize 自动调整窗口的高度使之与内容相适应

6 兼容性

支持最新版本的FireFox, Safari 和 Opera，chrome ，还有 IE6 和 IE7。