jQuery的燈箱插件 ColorBox
ColorBox是一個基于jQuery 的輕量級，自定義燈箱插件，功能非常強大，支持圖片，圖片組，ajax，inline和iframed內容，燈箱樣式完全由用戶控制，可自定義CSS樣 式，不需要改寫ColorBox庫文件就能重寫展示效果設置，支持加載預處理提示等等，效果圖如下：
使用說明
1，jQuery 庫文件
2，colorbox 庫文件
3，燈箱效果CSS樣式文件
使用實例如下：
一，使用ColorBox燈箱顯示一張圖片和圖片組
(1)js部分
$.fn.colorbox.settings.transition = "fade";
$.fn.colorbox.settings.bgOpacity = "0.9";
$.fn.colorbox.settings.contentCurrent = "image {current} of {total}";
$(".cpModal").colorbox();
transition設置ColorBox燈箱的過渡效果，如上：fade
bgOpacity設置ColorBox燈箱的背景透明度，如上：0.9
contentCurrent設置ColorBox燈箱的當前圖片，如上：image {current} of {total}
(2)HTML部分
二，使用ColorBox燈箱顯示ajax加載HTML頁面
(1)js部分
$("#ajax").colorbox({contentWidth:"300px", contentHeight:"195px"});
contentWidth設置ColorBox燈箱的內容寬度，如上：300px
contentHeight設置ColorBox燈箱的內容高度，如上：195px
(2)HTML部分
ajax.html表示加載的html頁面，
三，使用ColorBox燈箱顯示flash頁面效果
(1)js部分
$("#flash").colorbox({contentAjax:"flash.html"});
(2)HTML部分
四，使用ColorBox燈箱顯示Inline HTML效果
(1)js部分
$("# inline").colorbox({ contentWidth:"500px", contentInline:"#inline-content"});
contentInline設置ColorBox燈箱的inline內容
(2)HTML部分
五，使用ColorBox燈箱顯示Iframed框架內容效果
(1)js部分
$("# google").colorbox({ contentWidth:"750px", contentHeight:"450px", contentIframe:true});
contentIframe設置ColorBox燈箱的內容是否為框架
(2)HTML部分
ColorBox燈箱配置如下：
transition 'elastic' 表示燈箱過渡效果，可選"elastic" or "fade"
transitionSpeed 350 表示燈箱過渡效果展示的速度
initialWidth 300 表示燈箱初始化寬度
initialHeight 100 表示燈箱初始化高度
contentWidth false 表示是否設置一個固定的寬度
contentHeight false 表示是否設置一個固定的高度
contentAjax false 表示是否是一個ajax加載
contentInline false 表示是否是一個inline
contentIframe false 表示是否是一個iframe
bgOpacity 0.85 表示燈箱的背景透明度
preloading true 表示是否預加載
contentCurrent '{current} of {total}' 表示燈箱展示的當前圖片和總數
contentPrevious 'previous' 表示上一個錨，類似于rel屬性
contentNext 'next' 表示下一個錨，類似于rel屬性
modalClose 'close' 錨文本關閉鏈接，可選Esc或close
jQuery插件ColorBox彩盒使用非常簡單，可實現功能非常多，如彈出新窗口，彈出圖片，彈出框架等等，值得推薦。
Version 1.3.18 - October 07 2011
Files Changed:jquery.colorbox.js/jquery.colorbox-min.js, colorbox.css (all) and example 1's controls.png
- Fixed a regression where Flash content displayed in ColorBox would be reloaded if the browser window was resized.
- Added safety check to make sure that ColorBox's markup is only added to the DOM a single time, even if $.colorbox.init() is called multiple times. This will allow site owners to manually initialize ColorBox if they need it before the DOM has finished loading.
- Updated the example index.html files to be HTML5 compliant.
- Changed the slideshow behavior so that it immediately moves to the next slide when the slideshow is started.
- Minor regex bugfix to allow automatic detection of image URLs that include fragments.
下載地址：colorbox.zip