ColorBox是一个基于jQuery的轻量级，自定义灯箱插件，功能非常强大，支持图片，图片组，ajax，inline和iframed内容，灯箱样式完全由用户控制，可自定义CSS样式，不需要改写ColorBox库文件就能重写展示效果设置，支持加载预处理提示等等，效果图如下：
在线演示：https://runjs.cn/detail/hjor2zox
使用说明1，jQuery1.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灯箱的过渡效果，如上：fadebgOpacity设置ColorBox灯箱的背景透明度，如上：0.9contentCurrent设置ColorBox灯箱的当前图片，如上：image{current}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({contentWidth:"300px",contentHeight:"195px"});
contentWidth设置ColorBox灯箱的内容宽度，如上：300pxcontentHeight设置ColorBox灯箱的内容高度，如上：195px
(2)HTML部分<p><aid="ajax"href="ajax.html">AjaxHTML</a></p>ajax.html表示加载的html页面，
三，使用ColorBox灯箱显示flash页面效果(1)js部分$("#flash").colorbox({contentAjax:"flash.html"});
(2)HTML部分
<p><aid="flash"href="https://www.youtube.com/watch?v=lBvaHZIrt0">Flash/Video</a></p>四，使用ColorBox灯箱显示InlineHTML效果(1)js部分$("#inline").colorbox({contentWidth:"500px",contentInline:"#inline-content"});contentInline设置ColorBox灯箱的inline内容
(2)HTML部分<p><aid="inline"href="#">InlineHTML</a></p><divstyle="display:none"><divid="inline-content"><divstyle="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><aid="google"href="https://www.google.com">Iframed内容</a></p>
ColorBox灯箱配置如下：transition'elastic'表示灯箱过渡效果，可选"elastic"or"fade"transitionSpeed 350表示灯箱过渡效果展示的速度initialWidth 300表示灯箱初始化宽度initialHeight 100表示灯箱初始化高度contentWidth false表示是否设置一个固定的宽度contentHeight false表示是否设置一个固定的高度contentAjax false表示是否是一个ajax加载contentInline false表示是否是一个inlinecontentIframe false表示是否是一个iframebgOpacity0.85表示灯箱的背景透明度preloading true表示是否预加载contentCurrent '{current}of{total}'表示灯箱展示的当前图片和总数contentPrevious 'previous'表示上一个锚，类似于rel属性contentNext 'next' 表示下一个锚，类似于rel属性modalClose 'close'锚文本关闭链接，可选Esc或close
jQuery插件ColorBox彩盒使用非常简单，可实现功能非常多，如弹出新窗口，弹出图片，弹出框架等等，值得推荐。
介绍内容来自https://www.biuuu.com/
评论