jQuery Fancybox外掛程式介紹

標籤：jquery fancybox

下面介紹一款jquery圖片播放外掛程式叫Fancybox，項目首頁地址：http://fancybox.net/

Fancybox的特點如下：

1、可以支援圖片、html文本、flash動畫、iframe以及ajax的支援

2、可以自訂播放器的CSS樣式

3、可以以組的形式進行播放，導航的按鈕（上一項，下一項）

4、如果將滑鼠滾動外掛程式（mouse wheel plugin）包含進來的話Fancybox還能支援滑鼠滾輪滾動來翻閱圖片

5、Fancybox播放器支援投影，更有立體的感覺

Fancybox使用方法：

1、引入jquery核心庫和Fancybox外掛程式庫

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

可選-如果需要用到fancy transition(一些動畫效果)你還需要引入以下指令碼

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

可選-如果需要支援滑鼠滾輪滾動效果你還需要引入以下指令碼

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

2、添加樣式檔案

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

3、在頁面上建立連結元素

A、圖片元素

<a id="simple_1" href="/img/simple1.jpg"><img src="/img/simple1.jpg" alt=""/></a>

B、普通文本

<a id="simple_2" href="#data" kesrc="#data">點擊這裡將顯示文本</a><div style="display: none;">    <div id="data">那片笑聲讓我想起我的那些花兒，在我生命每個角落靜靜為我開著.</div></div>

C、Iframe

<a id="simple_3" href="http://www.baidu.com">Baidu</a>

D、不同的動畫風格

<a id="example1" href="/img/simple1.jpg"><img alt="example1" src="/img/simple1.jpg" /></a><a id="example2" href="/img/simple1.jpg"><img alt="example2" src="/img/simple1.jpg" /></a><a id="example3" href="/img/simple1.jpg"><img alt="example3" src="/img/simple1.jpg" /></a><a id="example4" href="/img/simple1.jpg"><img class="last" alt="example4" src="/img/simple1.jpg" /></a>

E、不同的標題位置

<a id="example5" href="/img/simple1.jpg" title="Learn a little bit every day."><img alt="example4" src="/img/simple1.jpg" /></a><a id="example6" href="/img/simple1.jpg" title="Learn a little bit every day."><img alt="example5" src="/img/simple1.jpg" /></a><a id="example7" href="/img/simple1.jpg" title="Learn a little bit every day."><img alt="example6" src="/img/simple1.jpg" /></a><a id="example8" href="/img/simple1.jpg" title="Learn a little bit every day."><img class="last" alt="example7" src="/img/simple1.jpg" /></a>

F、以組的形式進行播放

<a rel="example_group" href="/img/simple1.jpg"><img alt="" src="/img/simple1.jpg" /></a><a rel="example_group" href="/img/simple2.jpg"><img alt="" src="/img/simple2.jpg" /></a>

4、jquery實現效果

<script type="text/javascript">$(function(){$("a#simple_1").fancybox(); //圖片元素$("a#simple_2").fancybox(); //普通文本$("#simple_3").fancybox({   //iframe元素 ‘width‘: ‘75%‘,‘height‘: ‘75%‘,‘autoScale‘: false,‘transitionIn‘: ‘none‘,‘transitionOut‘: ‘none‘,‘type‘: ‘iframe‘});//不同的動畫風格$("a#example1").fancybox();$("a#example2").fancybox({‘overlayShow‘: false,‘transitionIn‘: ‘elastic‘,‘transitionOut‘: ‘elastic‘});$("a#example3").fancybox({‘transitionIn‘: ‘none‘,‘transitionOut‘: ‘none‘});$("a#example4").fancybox({‘opacity‘: true,‘overlayShow‘: false,‘transitionIn‘: ‘elastic‘,‘transitionOut‘: ‘none‘});//不同的標題位置$("a#example5").fancybox();$("a#example6").fancybox({‘titlePosition‘: ‘outside‘,‘overlayColor‘: ‘#000‘,‘overlayOpacity‘: 0.9});$("a#example7").fancybox({‘titlePosition‘: ‘inside‘});$("a#example8").fancybox({‘titlePosition‘: ‘over‘});//以組的形式進行播放$("a[rel=example_group]").fancybox({‘transitionIn‘: ‘none‘,‘transitionOut‘: ‘none‘,‘titlePosition‘ : ‘over‘,‘titleFormat‘: function(title, currentArray, currentIndex, currentOpts) {return ‘<span id="fancybox-title-over">Image ‘ + (currentIndex + 1) + ‘ / ‘+ currentArray.length + (title.length ? ‘   ‘ + title : ‘‘) + ‘</span>‘;}});}) </script>