ThickBox 3.1 彈出式對話視窗

ThickBox 3.1 網頁對話框套件基於 jQuery 框架開發，可以利用來展示單張或多張的圖片會產生導覽列供瀏覽全部的照片，也可以展示同一個頁面上的任何網頁元素，還能夠使用 iFrame 來連結別的網頁放進對話框中，重要的是還能夠透過 AJAX 的方式取得內容。簡單容易使用並且容量輕巧，壓縮過後的檔案僅 10 K 左右。

使用方法：
第一步 載入 ThickBox 3.1 需要用到的 CSS 和 JavaScript 檔
<!-- 使用 Google AJAX API 取得 jQuery 框架的 1.8.2 min 版本-->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- ThickBox 3.1 的主程式碼 -->
<script type="text/javascript" src="path-to-file/thickbox.js"></script>
<!-- ThickBox 3.1 的 CSS 設計檔-->
<link rel="stylesheet" href="path-to-file/thickbox.css" type="text/css" media="screen" />

第二步 使用 HTML 設計圖片列表
<a href="images/plant1.jpg" title="add a caption to title attribute / or leave blank" class="thickbox" rel="gallery-plants">
     <img src="images/plant1_t.jpg" alt="Plant 1" />
</a>
<a href="images/plant2.jpg" title="add a caption to title attribute / or leave blank" class="thickbox" rel="gallery-plants">
     <img src="images/plant2_t.jpg" alt="Plant 2" />
</a>
<a href="images/plant3.jpg" title="add a caption to title attribute / or leave blank" class="thickbox" rel="gallery-plants">
     <img src="images/plant3_t.jpg" alt="Plant 3" />
</a>
<a href="images/plant4.jpg" title="add a caption to title attribute / or leave blank" class="thickbox" rel="gallery-plants">
     <img src="images/plant4_t.jpg" alt="Plant 4" />
</a>

使用 Class 樣式 thickbox 表示需要用到對話視窗
rel 則表示為同一群組的圖片列表會出現導航
不需要使用到 JavaScript 在主程式中已經初始化完成
只需要用 Class 和本身的連結來控制

作者網站：http://thickbox.net/
檔案大小：9.64 KB
檔案下載：http://thickbox.net/thickbox-code/thickbox-compressed.js
檔案備份：下載