DevOps研发效能
媒体矩阵
开源中国APP
授权协议 MIT
开发语言 JavaScript
操作系统 跨平台
软件类型 开源软件
所属分类 jQuery 插件jQuery对话框
开源组织
地区 不详
投 递 者 小编辑
适用人群 未知
收录时间 2010-01-30

软件简介

ColorBox是一个基于 jQuery 的轻量级,自定义灯箱插件,功能非常强大,支持图片,图片组,ajax,inline和iframed内容,灯箱样式完全由用户控制,可自定义CSS样 式,不需要改写ColorBox库文件就能重写展示效果设置,支持加载预处理提示等等,效果图如下:

在线演示:http://runjs.cn/detail/hjor2zox

使用说明
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"
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彩盒使用非常简单,可实现功能非常多,如弹出新窗口,弹出图片,弹出框架等等,值得推荐。

介绍内容来自 http://www.biuuu.com/

展开阅读全文

代码

评论

点击加入讨论🔥(1) 发布并加入讨论🔥
发表了资讯
2016/05/13 00:00

Colorbox 1.6.4 发布,jQuery 弹窗组件

Colorbox 1.6.4 发布,该版本修复了使用 inline 属性时如果选择器匹配到多个元素导致重复的目标元素。 ColorBox是一个基于 jQuery 的轻量级,自定义灯箱插件,功能非常强大,支持图片,图片组,ajax,inline和iframed内容,灯箱样式完全由用户控制,可自定义CSS样 式,不需要改写ColorBox库文件就能重写展示效果设置,支持加载预处理提示等等,效果图如下:

10
55
发表了资讯
2011/11/23 00:00

ColorBox 1.3.18 发布

ColorBox是一个基于jQuery 1.3 的轻量级,自定义灯箱插件,功能非常强大,支持图片,图片组,ajax,inline和iframed内容,灯箱样式完全由用户控制,可自定义CSS样 式,不需要改写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 w...

4
3
没有更多内容
加载失败,请刷新页面
点击加载更多
加载中
下一页
发表了博客
{{o.pubDate | formatDate}}

{{formatAllHtml(o.title)}}

{{parseInt(o.replyCount) | bigNumberTransform}}
{{parseInt(o.viewCount) | bigNumberTransform}}
没有更多内容
暂无内容
发表了问答
{{o.pubDate | formatDate}}

{{formatAllHtml(o.title)}}

{{parseInt(o.replyCount) | bigNumberTransform}}
{{parseInt(o.viewCount) | bigNumberTransform}}
没有更多内容
暂无内容
暂无内容
1 评论
195 收藏
分享
OSCHINA
登录后可查看更多优质内容
返回顶部
顶部