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 自动调整窗口的高度使之与内容相适应
鄂公网安备 42090202000212号