【推薦】jquery幻燈片插件fancybox

插件地址： http://fancybox.net/

使用方法

1. 包含需要的 JS 文件

<script src="path-to-file/jquery.js" type="text/javascript"><!--mce:0--></script> <script src="path-to-file/jquery.fancybox.js" type="text/javascript"><!--mce:1--></script>

選擇性的添加 easing 插件所需的 js 文件, 如果不使用該插件就不添加.

<script src="path-to-file/jquery.easing.js" type="text/javascript"><!--mce:2--></script>

2. 添加 FancyBox CSS 文件
如果 FancyBox CSS 文件沒有和 images 目錄在同一目錄內, 應該改變圖片路徑

3. 創建一個鏈接
加載圖片使用:

<a id="single_image" href="image_big.jpg"><img src="image_small.jpg" alt="" /></a>

加載同一頁面中的 element:

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

Iframe方式:

<a href="http://www.example?iframe">This goes to iframe</a> or <a class="iframe" href="http://www.example">This goes to iframe</a>

Ajax:

<a href="http://www.example/data.php">This takes content using ajax</a>

可選參數:使用title屬性可以增加圖片說明文字.
注意:你或許想要刪除點擊圖片關閉展示這個功能,此時你必須使用 Iframe 或者 inline 方式去加載.

4. 使用 jQuery 選擇器

$(document).ready(function() { /* This is basic - uses default settings */   $("a#single_image").fancybox();   /* Using custom settings */   $("a#inline").fancybox({ 'hideOnContentClick': true });   $("a.group").fancybox({ 'zoomSpeedIn': 300, 'zoomSpeedOut': 300, 'overlayShow': false }); });