ColorBox是一个基于jQuery的轻量级，自定义灯箱插件，功能非常强大，支持图片，图片组，ajax，ilie和iframed内容，灯箱样式完全由用户控制，可自定义CSS样式，不需要改写ColorBox库文件就能重写展示效果设置，支持加载预处理提示等等，效果图如下：
在线演示：https://rujs.c/detail/hjor2zox
使用说明1，jQuery1.3库文件2，colorbox库文件3，灯箱效果CSS样式文件
使用实例如下：一，使用ColorBox灯箱显示一张图片和图片组(1)js部分$.f.colorbox.settigs.trasitio="fade";$.f.colorbox.settigs.bgOpacity="0.9";$.f.colorbox.settigs.cotetCurret="image{curret}of{total}";$(".cpModal").colorbox();
trasitio设置ColorBox灯箱的过渡效果，如上：fadebgOpacity设置ColorBox灯箱的背景透明度，如上：0.9cotetCurret设置ColorBox灯箱的当前图片，如上：image{curret}of{total}
(2)HTML部分<p><aclass="cpModal"href="marylou.jpg">单张图片</a></p><p><aclass="cpModal"href="biuuu1.jpg">图片组1</a></p><p><aclass="cpModal"href="biuuu2.jpg">图片组2</a></p><p><aclass="cpModal"href="biuuu3.jpg">图片组3</a></p>
二，使用ColorBox灯箱显示ajax加载HTML页面(1)js部分$("#ajax").colorbox({cotetWidth:"300px",cotetHeight:"195px"});
cotetWidth设置ColorBox灯箱的内容宽度，如上：300pxcotetHeight设置ColorBox灯箱的内容高度，如上：195px
(2)HTML部分<p><aid="ajax"href="ajax.html">AjaxHTML</a></p>ajax.html表示加载的html页面，
三，使用ColorBox灯箱显示flash页面效果(1)js部分$("#flash").colorbox({cotetAjax:"flash.html"});
(2)HTML部分
<p><aid="flash"href="https://www.youtube.com/watch?v=lBvaHZIrt0">Flash/Video</a></p>四，使用ColorBox灯箱显示IlieHTML效果(1)js部分$("#ilie").colorbox({cotetWidth:"500px",cotetIlie:"#ilie-cotet"});cotetIlie设置ColorBox灯箱的ilie内容
(2)HTML部分<p><aid="ilie"href="#">IlieHTML</a></p><divstyle="display:oe"><divid="ilie-cotet"><divstyle="paddig:10px"><p>必优博客</p><p>www.biuuu.com</p></div></div></div>五，使用ColorBox灯箱显示Iframed框架内容效果(1)js部分$("#google").colorbox({cotetWidth:"750px",cotetHeight:"450px",cotetIframe:true});
cotetIframe设置ColorBox灯箱的内容是否为框架
(2)HTML部分<p><aid="google"href="https://www.google.com">Iframed内容</a></p>
ColorBox灯箱配置如下：trasitio'elastic'表示灯箱过渡效果，可选"elastic"or"fade"trasitioSpeed 350表示灯箱过渡效果展示的速度iitialWidth 300表示灯箱初始化宽度iitialHeight 100表示灯箱初始化高度cotetWidth false表示是否设置一个固定的宽度cotetHeight false表示是否设置一个固定的高度cotetAjax false表示是否是一个ajax加载cotetIlie false表示是否是一个iliecotetIframe false表示是否是一个iframebgOpacity0.85表示灯箱的背景透明度preloadig true表示是否预加载cotetCurret '{curret}of{total}'表示灯箱展示的当前图片和总数cotetPrevious 'previous'表示上一个锚，类似于rel属性cotetNext 'ext' 表示下一个锚，类似于rel属性modalClose 'close'锚文本关闭链接，可选Esc或close
jQuery插件ColorBox彩盒使用非常简单，可实现功能非常多，如弹出新窗口，弹出图片，弹出框架等等，值得推荐。
介绍内容来自https://www.biuuu.com/
评论