Fancybox是一款基于jquery开发的类Lightbox插件。支持对放大的图片添加阴影效果，对于一组相关的图片添加导航操作按纽。

Fancybox 是一款很绚丽的 jquery 弹出层展示插件，该lightbox除了能够展示图片之外，还可以展示iframed内容， 通过css自定义外观。

 

下载地址：https://storage.googleapis.com/google-code-archive-downloads/v2/code.google.com/fancybox/jquery.fancybox-1.3.4.zip

 

使用方法

 

引入核心文件：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.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" />

 

<!--也可以通过easing插件实现fancy transitions 动画效果-->

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

 

<!--如果要实现图片滚轮效果，引入下面文件：-->

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

 

 

图片应用：

<a id="single_image" href="image_big.jpg"><img src="image_small.jpg" alt=""/></a>

 

链接应用：

<a id="inline" href="#data">This shows content of element who has id="data"</a>

<div style="display:none"><div id="data">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div></div>

 

Iframe应用：

<a href="http://www.example?iframe">This goes to iframe</a>

 

or

 

<a class="iframe" href="http://www.example">This goes to iframe</a>

 

Ajax应用：

<a href="http://www.example/data.php">This takes content using ajax</a>

 

JQuery控制代码：

 

$(document).ready(function() {

 

/* This is basic - uses default settings */

 

$("a#single_image").fancybox();

 

/* Using custom settings */

 

$("a#inline").fancybox({

'hideOnContentClick': true

});

 

/* Apply fancybox to multiple items */

 

$("a.group").fancybox({

'transitionIn' : 'elastic',

'transitionOut' : 'elastic',

'speedIn' : 600, 

'speedOut' : 200, 

'overlayShow' : false

});

 

});

 

用rel标签来创建相册

 

/* HTML结构 */

<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> 

 

 

/* JQuery结构*/

$("a.grouped_elements").fancybox();

 

fancybox中的一些常用参数

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

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