FancyBox——jQuery彈出窗口插件

最近工作項目中有用到這款插件，就查找了一下相關資料和用法，下面是一些基本的簡單用法，比較容易掌握，有需要的小伙伴可以參考。：）

FancyBox是一款基於jquery開發的類Lightbox插件。支持對放大的圖片添加陰影效果，對於一組相關的圖片添加導航操作按紐，該lightbox除了能夠展示圖片之外，還可以展示iframed內容， 通過css自定義外觀。

相對與Lightbox而言，陰影效果更好。但是比Lightbox絢麗。

可以到這里看演示效果：http://www.phpddt.com/demo/fancyBox/demo/index.html

使用方法

1 需要下載jquery--fancybox的文件，可以到這里下載http://fancyapps.com/fancybox/。也可以到我的博客空間的上傳文件里找。

2 引入對應的js和css文件

<!--首先要引入jQuery庫和fancybox插件庫-->

<script type="text/javascript" src="../lib/jquery-1.10.1.min.js"></script>

<!--FancyBox核心js和css文件：-->

<script type="text/javascript" src="../source/jquery.fancybox.js"></script>

<link rel="stylesheet" type="text/css" href="../source/jquery.fancybox.css" media="screen" />

<!--如果要實現圖片滾輪效果，引入下面文件：-->

<script type="text/javascript" src="../lib/jquery.mousewheel-3.0.6.pack.js"></script>

<!--如果需要按鈕效果，引入按鈕css文件：-->

<link rel="stylesheet" type="text/css" href="../source/helpers/jquery.fancybox-buttons.css" />

<script type="text/javascript" src="../source/helpers/jquery.fancybox-buttons.js"></script>

<!--如果要實現縮略圖效果，引入：-->

<link rel="stylesheet" type="text/css" href="../source/helpers/jquery.fancybox-thumbs.css" />

<script type="text/javascript" src="../source/helpers/jquery.fancybox-thumbs.js"></script>

<!--如果要動態加載媒體，引入：-->

<script type="text/javascript" src="../source/helpers/jquery.fancybox-media.js"></script>

<!--也可以通過easing插件實現fancy transitions 動畫效果-->

<script type="text/javascript" src="../source/helpers/jquery.easing.js"></script>

 

3 創建一個鏈接元素

a鏈接的href可以指向圖片和地址，a標簽也可以包含圖片、inline內容、iframe框架，例如

<!--圖片-->

<a href="...jpg"><img src=""/></a>

<a href="http://...."><img src=""/></a>

<!--inline內容-->

<a href="#data">this shows content of element who has id="data"</a>

<!--iframe框架-->

<a href="http://www.example?iframe"></a>

 

4 調用fancybox功能

$(document).ready(function(){
     $("a#element").fancybox();
    
     //還可以修改fancybox中的某些參數，去設置自定義效果，例如：
    $("a#element").fancybox({
               'zoomSpeedIn': 300, 
        'zoomSpeedOut': 300, 
        'overlayShow': false 

    });

    //或者
     $('a.newBtn').each(function(index)
    {
        $(this).fancybox({
            'width' : '95%',
            'height' : '95%',
            'type' : 'iframe',
            'hideOnOverlayClick' : false,
            'onCleanup' : function() { return confirm('Are you sure to close this dialog?All data will be lost if not save.');},
            'onClosed' : function() { window.location.href = 'index.aspx';}
        });
    });

    
});

用rel標簽來創建相冊

<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> 
 
<script>
$("a.grouped_elements").fancybox();
</script>

 

5 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 自動調整窗口的高度使之與內容相適應

6 兼容性

支持最新版本的FireFox, Safari 和 Opera，chrome ，還有 IE6 和 IE7。