今天給大家分享一款優秀的 jquery 彈出層展示插件 fancybox。它除了能夠展示圖片之外，還可以展示 flash、iframe 內容、html 文本以及 ajax 調用，我們可以通過 css 來自定義外觀。
fancybox 特點：
- 可以支持圖片、html 文本、flash 動畫、iframe 以及 ajax 的支持；
- 可以自定義播放器的 css 樣式；
- 可以以組的形式進行播放；
- 如果將鼠標滾動插件（mouse wheel plugin）包含進來的話 fancybox 還能支持鼠標滾輪滾動來翻閱圖片；
- fancybox 播放器支持投影，更有立體的感覺。
fancybox 使用方法：
首先需要引入 jquery 核心庫和 fancybox 插件：
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script src="/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
如果需要用 transition（一些動畫效果）你還需要引入以下 js：
<script src="/fancybox/jquery.easing-1.4.pack.js"></script>
如果需要支持鼠標滾輪滾動效果你還需要引入以下 js：
<script src="/fancybox/jquery.mousewheel-3.0.4.pack.js"></script>
然后引入樣式表：
<link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.4.css"/>
之后在頁面上添加一個 a 標簽：
<a id="single_image" href="image_big.jpg"><img src="image_small.jpg" alt=""/></a>
其中 a 標簽的 href 中的圖片就是我們需要彈層顯示的大圖。
最后調用 fancybox 方法：
$("#single_image").fancybox();
當然這只能顯示一張圖片，有時候我們可能需要做個相冊之類的多張圖片，那么可以用 rel 屬性來創建圖片組（也就是 fancybox 特點的第三點），如下代碼：
<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>
調用方法也很簡單：
$(".grouped_elements").fancybox();
fancybox 參數：
fancybox 之所以優秀是因為它的參數配置很強大，幾乎可以滿足我們所有的需要。
| 屬性值 | 默認值 | 描述 |
| padding | 10 | 播放器內邊距的值 |
| margin | 20 | 播放器外邊距的值 |
| opacity | false | 如果為 true，則 fancybox 在動畫改變的時候透明度可以跟着改變 |
| modal | false | 如果為 true，則 'overlayShow' 會被設成 'true'，'hideOnOverlayClick'，'hideOnContentClick'，'enableEscapeButton'，'showCloseButton' 會被設成 'false' |
| cyclic | false | 如果為 true，相冊會循環播放 |
| scrolling | 'auto' | 設置 overflow 的值來創建或隱藏滾動條，可以設置成 'auto'，'yes' 或 'no' |
| width | 560 | 設置 iframe 和 swf 的寬度，如果 'autoDimensions' 為 'false'，這也可以設置普通文本的寬度 |
| height | 340 | 設置 iframe 和 swf 的高度，如果 'autoDimensions' 為 'false'，這也可以設置普通文本的高度 |
| autoScale | true | 如果為 true，fancybox 可以自適應瀏覽器窗口大小 |
| autoDimensions | true | 在內聯文本和 ajax 中，設置是否動態調整元素的尺寸，如果為 true，請確保你已經為元素設置了尺寸大小 |
| centerOnScroll | false | 如果為 true，當你滾動滾動條時，fancybox將會一直停留在瀏覽器中心 |
| ajax | { } | 和 jquery 的 ajax 調用選項一樣。注意：'error' 和 'success' 這兩個回調事件會被 fancybox 重寫 |
| swf | {wmode: 'transparent'} | swf 的設置選項 |
| hideOnOverlayClick | true | 如果為 true，則點擊遮罩層關閉 fancybox |
| hideOnContentClick | false | 如果為 true，則點擊播放內容關閉 fancybox |
| overlayShow | true | 如果為 true，則顯示遮罩層 |
| overlayOpacity | 0.3 | 遮罩層的透明度（范圍0-1） |
| overlayColor | '#666' | 遮罩層的背景顏色 |
| titleShow | true | 如果為 true，則顯示標題 |
| titlePosition | 'outside' | 設置標題顯示的位置，可以設置成 'outside'，'inside' 或 'over' |
| titleFormat | null | 可以自定義標題的格式 |
| transitionIn，transitionOut | 'fade' | 設置動畫效果，可以設置為 'elastic'，'fade' 或 'none' |
| speedIn，speedOut | 300 | fade 和 elastic 動畫切換的時間間隔，以毫秒為單位 |
| changeSpeed | 300 | 切換時 fancybox 尺寸的變化時間間隔（即變化的速度），以毫秒為單位 |
| changeFade | 'fast' | 切換時內容淡入淡出的時間間隔（即變化的速度） |
| easingIn，easingOut | 'swing' | 為 elastic 動畫使用 Easing |
| showCloseButton | true | 如果為 true，則顯示關閉按鈕 |
| showNavArrows | true | 如果為 true，則顯示上一張下一張導航箭頭 |
| enableEscapeButton | true | 如果為 true，則啟用 esc 來關閉 fancybox |
| onStart | null | 回調函數，加載內容時觸發 |
| onCancel | null | 回調函數，取消加載內容后觸發 |
| onComplete | null | 回調函數，加載內容完成后觸發 |
| onCleanup | null | 回調函數，關閉 fancybox 前觸發 |
| onClosed | null | 回調函數，關閉 fancybox 后觸發 |
官網地址：http://fancybox.net/