【jquery】fancybox 是一款優秀的 jquery 彈出層展現插件

今天給你們分享一款優秀的 jquery 彈出層展現插件 fancybox。它除了可以展現圖片以外，還能夠展現 flash、iframe 內容、html 文本以及 ajax 調用，咱們能夠經過 css 來自定義外觀。

fancybox 特色：

1. 能夠支持圖片、html 文本、flash 動畫、iframe 以及 ajax 的支持；
2. 能夠自定義播放器的 css 樣式；
3. 能夠以組的形式進行播放；
4. 若是將鼠標滾動插件（mouse wheel plugin）包含進來的話 fancybox 還能支持鼠標滾輪滾動來翻閱圖片；
5. 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/