Jquery插件之ColorBox各种使用方法及参数设定

Jquery插件之ColorBox各种使用方法及参数设定一，使用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部分

单张图片

图片组1

图片组2

图片组3

二，使用ColorBox灯箱显示ajax加载HTML页面

(1)js部分

$("#ajax").colorbox({contentWidth:"300px", contentHeight:"195px"});

contentWidth设置ColorBox灯箱的内容宽度，如上：300px contentHeight设置ColorBox灯箱的内容高度，如上：195px (2)HTML部分

Ajax HTML

ajax.html表示加载的html页面，

三，使用ColorBox灯箱显示flash页面效果

(1)js部分

$("#flash").colorbox({contentAjax:"flash.html"});

(2)HTML部分

href="/watch?v=lBvaHZIrt0">Flash / Video

四，使用ColorBox灯箱显示Inline HTML效果

(1)js部分

$("#inline").colorbox({contentWidth:"500px", contentInline:"#inline-content"});

contentInline设置ColorBox灯箱的inline内容

(2)HTML部分

Inline HTML

必优博客

五，使用ColorBox灯箱显示Iframed框架内容效果

(1)js部分

$("#google").colorbox({contentWidth:"750px", contentHeight:"450px", contentIframe:true});

contentIframe设置ColorBox灯箱的内容是否为框架

(2)HTML部分

Iframed内容

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

bgOpacity0.85 表示灯箱的背景透明度

preloading true 表示是否预加载

contentCurrent '{current} of {total}' 表示灯箱展示的当前图片和总数contentPrevious 'previous' 表示上一个锚，类似于rel属性contentNext 'next' 表示下一个锚，类似于rel属性

modalClose 'close' 锚文本关闭链接，可选Esc或close

jQuery插件ColorBox彩盒使用非常简单，可实现功能非常多，如弹出新窗口，弹出图片，弹出框架等等，值得推荐。