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號