使用说明
1，jQuery 1.3库文件
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部分
<p><a class="cpModal" href="marylou.jpg" >单张图片</a></p>
<p><a class="cpModal" href="biuuu1.jpg" >图片组1</a></p>
<p><a class="cpModal" href="biuuu2.jpg" >图片组2</a></p>
<p><a class="cpModal" href="biuuu3.jpg" >图片组3</a></p>
二，使用ColorBox灯箱显示ajax加载HTML页面
(1)js部分
$("#ajax").colorbox({contentWidth:"300px", contentHeight:"195px"})
contentWidth设置ColorBox灯箱的内容宽度，如上：300px
contentHeight设置ColorBox灯箱的内容高度，如上：195px
(2)HTML部分
<p><a id="ajax" href="ajax.html">Ajax HTML</a></p>
ajax.html表示加载的html页面，
三，使用ColorBox灯箱显示flash页面效果
(1)js部分
$("#flash").colorbox({contentAjax:"flash.html"})
(2)HTML部分
<p><a id="flash" href="http://www.youtube.com/watch?v=lBvaHZIrt0">Flash / Video</a></p>
四，使用ColorBox灯箱显示Inline HTML效果
(1)js部分
$("#inline").colorbox({contentWidth:"500px", contentInline:"#inline-content"})
contentInline设置ColorBox灯箱的inline内容
(2)HTML部分
<p><a id="inline" href="#">Inline HTML</a></p>
<div style="display:none">
<div id="inline-content">
<div style="padding:10px">
<p>必优博客</p>
<p>www.biuuu.com</p>
</div>
</div>
</div>
五，使用ColorBox灯箱显示Iframed框架内容效果
(1)js部分
$("#google").colorbox({contentWidth:"750px", contentHeight:"450px", contentIframe:true})
contentIframe设置ColorBox灯箱的内容是否为框架
(2)HTML部分
<p><a id="google" href="http://www.google.com">Iframed内容</a></p>
ColorBox灯箱配置如下：
transition 'elastic' 表示灯箱过渡效果，可选"elastic" or "fade"
transitionSpeed350 表示灯箱过渡效果展示的速度
initialWidth300 表示灯箱初始化宽度
initialHeight100 表示灯箱初始化高度
contentWidthfalse 表示是否设置一个固定的宽度
contentHeightfalse 表示是否设置一个固定的高度
contentAjaxfalse 表示是否是一个ajax加载
contentInlinefalse 表示是否是一个inline
contentIframefalse 表示是否是一个iframe
bgOpacity 0.85 表示灯箱的背景透明度
preloadingtrue 表示是否预加载
contentCurrent'{current} of {total}' 表示灯箱展示的当前图片和总数
contentPrevious'previous' 表示上一个锚，类似于rel属性
contentNext'next'表示下一个锚，类似于rel属性
modalClose'close' 锚文本关闭链接，可选Esc或close
jQuery插件ColorBox彩盒使用非常简单，可实现功能非常多，如弹出新窗口，弹出图片，弹出框架等等，值得推荐。
软件主页： http://colorpowered.com/colorbox/
下载地址： http://colorpowered.com/colorbox/colorbox.zip
不要看到华丽效果就以为html5 css3（在我看来这个效果也不华丽）。html4+css2用好了足以颠覆你对html的认识。你看到的这个是一个居中的div（A），它用了一张图片做背景居中div的父元素（B）是100%宽的，它的背景是一张平铺的图片。B的背景色和A的背景图片边缘颜色一致，看上去是一张图片。图片切换的淡入淡出，动态改变透明度罢了，jQuery的fadeIn fadeOut即可实现。
