fancyBox是一款優秀的彈出框Jquery插件。

特點

1、允許我們用鼠標和鍵盤上的四個方向鍵切換圖片
2、可以根據當前窗口大小自動調整彈出框的大小，當我們改變瀏覽器窗口大小時，將會看到彈出框自動縮放了
3、支持縮略圖和按鈕幫助導航
4、彈出框支持顯示多種類型的內容（圖片，html，視頻……）
請下載demo中的文件（建議下載網盤中的，已經經過整理），查看index.html中的源代碼，提取你想要的效果的js和html代碼。

還可以參加參數列表進行自定義設置。

 

使用步驟

1、下載插件並解壓，複製文件並在你的頁面中包含相關的腳本和樣式文件，注意js和css文件的路徑，（其實有些文件是可選的）

1 2 3 4 5 6 7 8 9

<script type="text/javascript" src="../lib/jquery-1.8.2.min.js"></script> <script type="text/javascript" src="../lib/jquery.mousewheel-3.0.6.pack.js"></script> <script type="text/javascript" src="../source/jquery.fancybox.js?v=2.1.3"></script> <link rel="stylesheet" type="text/css" href="../source/jquery.fancybox.css?v=2.1.2" media="screen"> <link rel="stylesheet" type="text/css"href="../source/helpers/jquery.fancybox-buttons.css?v=1.0.5"> <script type="text/javascript" src="../source/helpers/jquery.fancybox-buttons.js?v=1.0.5"></script> <link rel="stylesheet" type="text/css"href="../source/helpers/jquery.fancybox-thumbs.css?v=1.0.7"> <script type="text/javascript" src="../source/helpers/jquery.fancybox-thumbs.js?v=1.0.7"></script> <script type="text/javascript" src="../source/helpers/jquery.fancybox-media.js?v=1.0.5"></script>

2、創建包含有將要在fancyBox中打開的元素的路徑的a標籤，大家可以注意到，這裏麪包含了兩張圖片，一張小圖和一張大圖，如果嫌麻煩的話，完全可以設置成一張圖片，只需要控制各自的大小即可。只不過這樣會在一定程度上加大頁面的負擔。

<a class="fancybox" rel="group" href="big_image_1.jpg"><imgsrc="small_image_1.jpg" alt=""></a> <a class="fancybox" rel="group"href="big_image_2.jpg"><img src="small_image_2.jpg" alt=""></a>

3、當頁面文檔被加載完畢後執行fancyBox函數

1 2 3 4 5

<script type="text/javascript">     $(document).ready(function () {         $( ".fancybox").fancybox();     }); </script>

參數列表（所有參數請參考官方文檔）

參數名 參數說明 可選值 默認值
padding 圖片距離彈出框的距離 整數或數組，如果是整數表示四個方向的內邊距都爲該整數，如果是數組則表示各個方向不同的值，表示爲： [top, right, bottom, left] 15
margin 彈出框距離瀏覽器四個方向的距離 整數或數組，如果是整數表示距離四個方向的距離都爲該整數，如果是數組則表示各個方向不同的值，表示爲： [top, right, bottom, left] 20
width 當’auotoSize’設置爲’false’時彈出框的寬度，僅適用於 iframe、swf、inline、ajax和html模式 數字或 ‘auto’ 800
height 當’auotoSize’設置爲’false’時彈出框的高度，僅適用於 iframe、swf、inline、ajax和html模式 數字或 ‘auto’ 600
minWidth 彈出框的最小寬度 數字 100
minHeight 彈出框的最小高度 數字 100
maxWidth 彈出框的最大寬度 數字 9999
maxHeight 彈出框的最大高度 數字 9999
autoSize 自動調整高度，如果設置爲ture,則要設置autoHeight和autoWidth爲true true或false true
autoHeight 如果設置爲true，那麼ajax、inline、html模式下的彈出框將自動調整高度 true或false false
autoWidth 如果設置爲true，那麼ajax、inline、html模式下的彈出框將自動調整寬度 true或false false
autoResize 如果設置爲true，當瀏覽器窗口大小改變的時候將自動調整彈出框大小 布爾值 !isTouch
autoCenter 如果設置爲true，那麼彈出框總是居中的 布爾值 !isTouch
fitToView 如果設置爲true，彈出框將會在打開之前自動適應大小 布爾值 true
aspectRatio 如果設置爲true，那麼重置大小將會被圖片的比例所影響 布爾值 false
topRatio 彈出框距離頂部與距離底部的比例，如果爲0.5，則表示居中 數字 0.5
leftRatio 彈出框距離左邊與距離右邊的比例，如果爲0.5，則表示居中 數字 0.5
scrolling 添加到scrollbars滾動條上的樣式 ‘auto’,'yes’,'no’,'visible’ ‘auto’
wrapCSS 環繞元素的樣式 字符串
arrows 如果設置爲true，導航箭頭將會被顯示 布爾值 true
closeBtn 如果設置爲true，將會顯示“關閉”圖標 布爾值 true
closeClick 如果設置爲true，當用戶點擊內容的時候將會關閉彈出框 布爾值 false
nextClick 如果設置爲true，當用戶點擊內容的時候將會導航到下一頁 布爾值 false
mouseWheel 是否啓用鼠標滾動切換 布爾值 true
autoPlay 是否自動播放彈出框的圖片 布爾值 false
playSpeed 播放毫秒速度 數字 3000
preload 預加載的圖片數 數字 3
modal 如果設置爲true，將會禁止導航和關閉 布爾值 false
loop 是否循環播放 布爾值 true
scrollOutside 如果設置爲true，將會視圖避免垂直方向的滾動條，針對 iframe和html 布爾值 true
index 重寫開始的圖片索引 數字 0
type 重寫內容的類型 ‘image’, ‘inline’, ‘ajax’, ‘iframe’, ‘swf’ 和 ‘html’ null
href 重寫內容的鏈接地址 字符串 null
content 重寫被展示的內容 字符串 null

title 重寫標題 字符串 null