JQuery插件FancyBox魔幻燈箱介紹

jopen 12年前發布 | 4K 次閱讀 百度云 MSN

采用Mac系統的樣式。網傳主要有以下功能：
■彈出的窗口有很漂亮的陰影效果。
■關聯的對象（就是rel標簽的值一樣）會成組顯示，上面還有導航的按鈕（上一項，下一項）。
■可以顯示圖片、內聯、ajax和iframe內容。
■可以通過設置參數和CSS定制效果。
■通過easing插件可以實現fancy transitions效果（就是一些動畫效果）。

1.可以支持圖片、html文本、flash動畫、iframe以及ajax的支持
2.可以自定義播放器的CSS樣式
3.可以以組的形式進行播放
4.如果將鼠標滾動插件（mouse wheel plugin）包含進來的話Fancybox還能支持鼠標滾輪滾動來翻閱圖片
5.Fancybox播放器支持投影，更有立體的感覺

到官網http://fancybox.net/可以看到更多的效果，我迫不及待地下載了代碼研究并翻譯下。使用還挺方便，背景遮罩，收縮，淡入淡出等效果，特別是右上角那個可愛的關閉按鈕，我很喜歡。彈出的內容不一定是一個圖片，也可以是文本，FLASH，一個FRAME，或服務器端某個文件。

代碼如下：

[html] view plaincopy
</div>

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  

  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">  

  3. <head>  

  4.     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />  

  5.     <meta http-equiv="imagetoolbar" content="no" />  

  6.     <title>魔幻燈箱 1.3.4版 | 示例</title>  

  7.     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>  

  8.     <script>  

  9.         !window.jQuery && document.write('<script src="jquery-1.4.3.min.js"><\/script>');  

  10.     </script>  

  11.     <!--調用可用鼠標控制的庫-->  

  12.     <script type="text/javascript" src="./fancybox/jquery.mousewheel-3.0.4.pack.js"></script>  

  13.     <script type="text/javascript" src="./fancybox/jquery.fancybox-1.3.4.pack.js"></script>  

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

  15.     <link rel="stylesheet" href="style.css" />  

  16.     <script type="text/javascript">  

  17.         $(document).ready(function() {  

  18.               

  19.             //顯示單個圖片例子  

  20.             $("a#example1").fancybox();  

  21.   

  22.             $("a#example2").fancybox({  

  23.                 'overlayShow'   : false,        //不顯示遮罩層，即背景不變暗  

  24.                 'transitionIn'  : 'elastic',    //設置顯示圖片的動畫效果為收縮  

  25.                 'transitionOut' : 'elastic'     //設置關閉圖片的動畫效果為收縮  

  26.             });  

  27.   

  28.             $("a#example3").fancybox({  

  29.                 'transitionIn'  : 'none',       //不設置動畫效果，  

  30.                 'transitionOut' : 'none'        //動畫效果有三種形式：elastic（收縮），fade（淡入淡出），none（無）  

  31.             });  

  32.   

  33.             $("a#example4").fancybox({  

  34.                 'opacity'       : true,  

  35.                 'overlayShow'   : false,  

  36.                 'transitionIn'  : 'elastic',  

  37.                 'transitionOut' : 'none'  

  38.             });  

  39.   

  40.             $("a#example5").fancybox();  

  41.   

  42.             $("a#example6").fancybox({  

  43.                 'titlePosition'     : 'outside',//標題在彈出對話框的外側  

  44.                 'overlayColor'      : '#000',   //遮罩層的背景顏色  

  45.                 'overlayOpacity'    : 0.9       //遮罩層(背景)的透明度，0則背景無變化，1則背景為黑色  

  46.             });  

  47.   

  48.             $("a#example7").fancybox({  

  49.                 'titlePosition': 'inside'      //標題在彈出對話框的內側，顯示圖片的下面  

  50.             });  

  51.   

  52.             $("a#example8").fancybox({  

  53.                 'titlePosition': 'over'        //標題浮動在圖片上  

  54.             });  

  55.   

  56.             //顯示一組圖片例子，鼠標在圖片上時可以顯示上一張下一張導航箭頭  

  57.             $("a[rel=example_group]").fancybox({  

  58.                 'transitionIn'      : 'none',  

  59.                 'transitionOut'     : 'none',  

  60.                 'titlePosition'     : 'over',  

  61.                 'titleFormat': function(title, currentArray, currentIndex, currentOpts) {  

  62.   

  63.                     //以【Image 1/4 圖片標題內容】形式顯示，如果圖片沒設置title則不顯示圖片標題內容  

  64.                     return '<span id="fancybox-title-over">Image ' + (currentIndex + 1) + ' / '   

  65.                     + currentArray.length + (title.length ? '   ' + title : '') + '</span>';  

  66.                 }  

  67.             });  

  68.   

  69.             //其他各種應用例子  

  70.             $("#various1").fancybox({  

  71.                 'titlePosition'     : 'inside',  

  72.                 'transitionIn'      : 'none',  

  73.                 'transitionOut'     : 'none'  

  74.             });  

  75.   

  76.             $("#various2").fancybox();  

  77.   

  78.             $("#various3").fancybox({  

  79.                 'width'             : '75%',  

  80.                 'height'            : '75%',  

  81.                 'autoScale'         : false,  

  82.                 'transitionIn'      : 'none',  

  83.                 'transitionOut'     : 'none',  

  84.                 'type'              : 'iframe'  

  85.             });  

  86.   

  87.             $("#various4").fancybox({  

  88.                 'padding'           : 0,  

  89.                 'autoScale'         : false,  

  90.                 'transitionIn'      : 'none',  

  91.                 'transitionOut'     : 'none'  

  92.             });  

  93.         });  

  94.     </script>  

  95. </head>  

  96. <body>  

  97. <div id="content">  

  98.     <h1>魔幻燈箱<span>1.3.4版示例 <a href="http://fancybox.net">官方主頁</a></span></h1>  

  99.     <p>  

  100.         不同的動畫效果<br />  

  101.         <a id="example1" href="./example/1_b.jpg"><img alt="example1" src="./example/1_s.jpg" /></a>  

  102.         <a id="example2" href="./example/2_b.jpg"><img alt="example2" src="./example/2_s.jpg" /></a>  

  103.         <a id="example3" href="./example/3_b.jpg"><img alt="example3" src="./example/3_s.jpg" /></a>  

  104.         <a id="example4" href="./example/4_b.jpg"><img class="last" alt="example4" src="./example/4_s.jpg" /></a>  

  105.     </p>  

  106.     <p>  

  107.         不同的標題位置<br />  

  108.         <a id="example5" href="./example/5_b.jpg" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit."><img alt="example4" src="./example/5_s.jpg" /></a>  

  109.         <a id="example6" href="./example/6_b.jpg" title="Etiam quis mi eu elit tempor facilisis id et neque. Nulla sit amet sem sapien. Vestibulum imperdiet porta ante ac ornare. Vivamus fringilla congue laoreet."><img alt="example5" src="./example/6_s.jpg" /></a>  

  110.         <a id="example7" href="./example/7_b.jpg" title="Cras neque mi, semper at interdum id, dapibus in leo. Suspendisse nunc leo, eleifend sit amet iaculis et, cursus sed turpis."><img alt="example6" src="./example/7_s.jpg" /></a>  

  111.         <a id="example8" href="./example/8_b.jpg" title="Sed vel sapien vel sem tempus placerat eu ut tortor. Nulla facilisi. Sed adipiscing, turpis ut cursus molestie, sem eros viverra mauris, quis sollicitudin sapien enim nec est. ras pulvinar placerat diam eu consectetur."><img class="last" alt="example7" src="./example/8_s.jpg" /></a>  

  112.     </p>  

  113.     <p>  

  114.         圖片瀏覽(可以用鼠標或鼠標滾輪來切換圖片)<br />  

  115.         <a rel="example_group" href="./example/9_b.jpg" title="Lorem ipsum dolor sit amet"><img alt="" src="./example/9_s.jpg" /></a>  

  116.         <a rel="example_group" href="./example/10_b.jpg" title=""><img alt="" src="./example/10_s.jpg" /></a>  

  117.         <a rel="example_group" href="./example/11_b.jpg" title=""><img alt="" src="./example/11_s.jpg" /></a>  

  118.         <a rel="example_group" href="./example/12_b.jpg" title=""><img class="last" alt="" src="./example/12_s.jpg" /></a>  

  119.     </p>  

  120.     <p>  

  121.         其他各種應用示例  

  122.     </p>  

  123.     <ul>  

  124.         <li><a id="various1" href="#inline1" title="Lorem ipsum dolor sit amet">顯示一個隱藏的DIV</a></li>  

  125.         <li><a id="various2" href="ajax.txt">用Ajax顯示ajax.txt里的內容</a></li>  

  126.         <li><a id="various3" href="http://baidu.com">在Iframe框架里顯示內容</a></li>  

  127.         <li><a id="various4" href="http://www.adobe.com/jp/events/cs3_web_edition_tour/swfs/perform.swf">顯示FLASH動畫</a></li>  

  128.     </ul>  

  129.     <div style="display: none;">  

  130.         <div id="inline1" style="width:400px;height:200px;overflow:auto;">  

  131.             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis mi eu elit tempor facilisis id et neque. Nulla sit amet sem sapien. Vestibulum imperdiet porta ante ac ornare. Nulla et lorem eu nibh adipiscing ultricies nec at lacus. Cras laoreet ultricies sem, at blandit mi eleifend aliquam. Nunc enim ipsum, vehicula non pretium varius, cursus ac tortor. Vivamus fringilla congue laoreet. Quisque ultrices sodales orci, quis rhoncus justo auctor in. Phasellus dui eros, bibendum eu feugiat ornare, faucibus eu mi. Nunc aliquet tempus sem, id aliquam diam varius ac. Maecenas nisl nunc, molestie vitae eleifend vel, iaculis sed magna. Aenean tempus lacus vitae orci posuere porttitor eget non felis. Donec lectus elit, aliquam nec eleifend sit amet, vestibulum sed nunc.  

  132.         </div>  

  133.     </div>  

  134.     Ajax例子需要運行到WEB服務器才能看到效果<br />  

  135.     Photo Credit: <a href="http://www.flickr.com/people/kharied/">Katie Harris</a>  

  136. </div>  

  137. </body>  

  138. </html>  
    139. </ol> </div>

    運行效果如下：

     

    補充：Fancybox的API和配置選項說明

    </tr> </thead>

    </tr>

    </tr>

    </tr>

    </tr>

    </tr>

    </tr>

    </tr>

    </tr>

    </tr>

    </tr>

    </tr>

    </tr>

    </tr>

    </tr>

    </tr>

    </tr>

    </tr>

    </tr>

    </tr>

    </tr>

    </tr>

    </tr>

    </tr>

    </tr>

    </tr>

    </tr>

    </tr>

    </tr>

    </tr>

    </tr>

    </tr>

    </tr>

    </tr>

    </tr> </tbody> </table>


     本文由用戶 jopen 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
     轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
     本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！
    寫博客

    博客分類

    推薦閱讀

    更多精彩內容

    JQuery插件FancyBox魔幻燈箱介紹

    采用Mac系統的樣式。網傳主要有以下功能： ■彈出的窗口有很漂亮的陰影效果。 ■關聯的對象（就是rel標簽的值一樣）會成組顯示，上面還有導航的按鈕（上一項，下一項）。 ■可以顯示圖片、內聯、aj...
    jopen

    介紹28個高質量的jQuery插件

    There is always a new challenge for web designers and developers. One of the latest is definitely...
    ajax

    10+個jQuery圖片滾動插件介紹

    1、 jCarousel 這款 jquery 圖片滾動插件用的人很多，功能上頗為強大，你可以控制是水平滾動還是垂直滾動。 2、 jCarousel Lite 這款插件優勢在于小巧，只有2K的js...
    umltool

    介紹最新最好的jQuery插件免費下載

    1) Wow Window - WowWindow is an alternative to Lightbox, for jQuery, that is much more fun and po...
    ajax
    屬性名 默認值 簡要說明
    padding 10 瀏覽框內邊距，和css中的padding一個意思
    margin 20 瀏覽框外邊距，和css中的margin一個意思
    opacity false 如果為true，則fancybox在動畫改變的時候透明度可以跟著改變
    modal false 如果為true，則'overlayShow' 會被設成 'true' ， 'hideOnOverlayClick', 'hideOnContentClick', 'enableEscapeButton', 'showCloseButton' 會被設成 'false'
    cyclic false 如果為true，相冊會循環播放
    scrolling 'auto' 設置overflow的值來創建或隱藏滾動條，可以設置成 'auto', 'yes', or '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' and '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后觸發
sesese色