colorbox弹出层
jQuery有很多弹出层插件，例如jQuery fancybox弹出层插件等，今天，我们来聊聊jQuery的另一款优秀的弹出层插件：jQuery Colorbox。
jQuery Colorbox是一款弹出层，内容播放插件，效果极佳，它不仅有弹性动画效果，淡入淡出效果，幻灯片播放，宽度自定义，还能够ajax加载html,iframe，自定义关闭功能等，最主要的是它还可以写回调函数。
<script src="http://www.5imoban.net/download/jquery/jquery-1.9.1.min.js"></script> <script src="../colorbox/jquery.colorbox.js"></script>2、引入ColorBox样式表文件，注意引入不同皮肤的css文件将实现不同的皮肤，每款皮肤都有对应的图片，在下载下来的压缩文件里面有五个example文件夹，分别对应五中不同效果：
<link media="screen" rel="stylesheet" href="colorbox.css" />3、html代码
<p> <a href="../content/ohoopee1.jpg" class='group1' title="Me and my">GroupedPhoto1</a> </p> <p> <a href="../content/ohoopee2.jpg" class='group1' title="On the Ohoopee">Grouped Photo 2</a> </p> <p> <a href="../content/ohoopee3.jpg" class='group1' title="On the Ohoopee">Grouped Photo 3</a> </p>4、jQuery调用：
$(".group1").colorbox({rel:'group1'});
5、手动关闭colorbox：写法一：
window.parent.$.fn.colorbox.close();写法二： parent.$.colorbox.close();
或者通过刷新父页面关闭：
window.parent.location.reload();6、参数设置：
|
属性 |
默认值 |
描述 |
|
transition |
"elastic" |
过渡型。可以设置为“弹性”，“消失”，或“无”。 |
|
speed |
350 |
套的褪色和弹性转换速度，以毫秒为单位。 |
|
href |
false |
这可以被用来作为一种替代锚URL或联想到的URL非锚的元素，如图片或表格按钮。$（“H1”.colorbox（的HREF）{ }”的民族性与地域性：”）； |
|
title |
false |
这可以作为一个锚定的方式－。 |
|
rel |
false |
这可以作为一个锚REL的替代方式。这允许用户在一个画廊集团任何元素的组合，或改变现有的关系所以元素不归。$（“a.gallery”.colorbox（REL）：“group1”{ }）；注：值也可以设置为“nofollow”禁用分组。 |
|
scalePhotos |
true |
如果是真的，如果最大，最大高度，innerwidth，innerheight，宽度或高度已经确定，ColorBox会规模的照片符合这些价值观。 |
|
scrolling |
true |
如果为false，ColorBox将隐藏溢出内容滚动条。这可以用于与调整相结合的方法（见下文）为一个平稳的过渡，如果你添加内容到方式已经打开的一个实例。 |
|
opacity |
0.85 |
叠加的不透明度。范围：0到1。 |
|
open |
false |
如果属实，将立即打开方式。 |
|
returnFocus |
true |
如果属实，将回来时的方式出口到元是从。 |
|
trapFocus |
true |
如果是真的，键盘焦点将限于ColorBox的导航和内容。 |
|
fastIframe |
true |
如果为false，加载图形去除和oncomplete事件将推迟到iframe的内容已经完全加载。 |
|
preloading |
true |
允许预压下”、“前”的内容在一个组，在目前的内容加载完毕。设置为false禁用。 |
|
overlayClose |
true |
如果为false，禁用关闭的方式通过点击背景叠加。 |
|
escKey |
true |
如果为假，将禁用“ESC”键关闭方式。 |
|
arrowKey |
true |
如果为假，将禁用左、右方向键从组中的项目之间导航。 |
|
loop |
true |
如果为假，将禁用环回组开始时的最后一个元素的能力。 |
|
data |
false |
提交GET或POST值通过一个Ajax请求。数据属性会完全像jQuery的。（）数据参数，如使用AJAX处理（）的方式。 |
|
className |
false |
增加一个给定的类的方式和覆盖。 |
|
fadeOut |
300 |
毫秒淡出速度，集，当关闭方式。 |
|
closeButton |
true |
设置为false将关闭按钮。 |
|
Internationalization |
||
|
current |
"image {current} of {total}" |
文本或HTML的组计数器在观看一组。{ }和{ }当前总的检测和实际的数字方式运行时更换。 |
|
previous |
"previous" |
文本或HTML以前在观看一组按钮。 |
|
next |
"next" |
文本或HTML的下一个按钮在观看一组。 |
|
close |
"close" |
文本或HTML for the Close按钮。the ESC关闭colorbox也将是关键。 |
|
xhrError |
"This content failed to load." |
错误消息时，Ajax的内容对于一个给定的URL不能加载。 |
|
imgError |
"This image failed to load." |
错误消息时给出一个链接到一个图像加载失败。 |
|
Content Type |
||
|
iframe |
false |
如果是真的，指定的内容应在iframe中显示。 |
|
inline |
false |
如果是真的，从当前文档的内容可以通过href属性jQuery选择器显示jQuery对象，或。 使用A /选择器：$（“#内联”.colorbox（）{内嵌链接：威胁：“# myform”}）； // Using a jQuery object:var $form = $("#myForm");$("#inline").colorbox({inline:true, href:$form}); |
|
html |
false |
显示一个字符串的HTML或文本：$.colorbox({html:"<p>Hello</p>"}); |
|
photo |
false |
如果是真的，这个设置军队的方式来显示链接的照片。用这个当照片自动检测失败（如使用URL的照片。PHP '而不是'照片.jpg”） |
|
ajax |
这个属性实际上不作为的方式承担所有的所有应被视为Ajax或照片，除非另一个指定的内容类型。 |
|
|
Dimensions |
||
|
width |
false |
设定一个固定的总宽度。这包括边框和按钮。例如：“100%”、“500px”，或500 |
|
height |
false |
设定一个固定的总高度。这包括边框和按钮。例如：“100%”、“500px”，或500 |
|
innerWidth |
false |
这是一个替代“宽度”用来设置一个固定的内部宽度。这不包括边框和按钮。例如：“50%”、“500px”，或500 |
|
innerHeight |
false |
这是另一种“高度”用来设置一个固定的内部高度。这不包括边框和按钮。例如：“50%”、“500px”，或500 |
|
initialWidth |
300 |
设置初始宽度，正在加载任何内容之前。 |
|
initialHeight |
100 |
设置初始高度，正在加载任何内容之前。 |
|
maxWidth |
false |
设置内容的最大宽度。例如：“100%”，500，“500px” |
|
maxHeight |
false |
设置内容的最大高度。例如：“100%”，500，“500px” |
|
Slideshow |
||
|
slideshow |
false |
如果是真的，增加了一个自动的幻灯片内容组/画廊。 |
|
slideshowSpeed |
2500 |
设置幻灯片的速度，以毫秒为单位。 |
|
slideshowAuto |
true |
如果是真的，幻灯片将自动开始播放。 |
|
slideshowStart |
"start slideshow" |
为幻灯片开始按钮文字。 |
|
slideshowStop |
"stop slideshow" |
停止自动滑动按钮的文本 |
|
Positioning |
||
|
fixed |
false |
如果是真的，颜色框将显示在一个固定的位置，在游客的视口。这是不同于默认的绝对定位相对于文档。 |
|
top |
false |
接受一个像素或百分比值（50，“50px”、“10%”）。而不是使用被集中在视口的默认位置控制方式的垂直定位。 |
|
bottom |
false |
接受一个像素或百分比值（50，“50px”、“10%”）。而不是使用被集中在视口的默认位置控制方式的垂直定位。 |
|
left |
false |
接受一个像素或百分比值（50，“50px”、“10%”）。控制方式的水平定位而不是使用被集中在视口的默认位置。 |
|
right |
false |
接受一个像素或百分比值（50，“50px”、“10%”）。控制方式的水平定位而不是使用被集中在视口的默认位置。 |
|
reposition |
true |
复位方式如果窗口的Resize事件触发。 |
|
Retina Images |
||
|
retinaImage |
false |
如果是真的，方式将减少与屏幕的像素比目前的照片 |
|
retinaUrl |
false |
如果是真的，该设备具有高分辨率显示器，ColorBox会与retinasuffix扩展替换当前照片的文件扩展名 |
|
retinaSuffix |
"@2x.$1" |
如果retinaurl真实设备具有高分辨率显示器，href值将其延伸扩展这个后缀。例如，默认值会改变`相片，JPG `到` my-photo@2x.jpg ` |
|
Callbacks |
||
|
onOpen |
false |
回调，火灾对ColorBox开始打开之前。 |
|
onLoad |
false |
回调，火灾就在试图加载的目标内容。 |
|
onComplete |
false |
回调后加载内容显示火灾。 |
|
onCleanup |
false |
回调，在关闭过程的生火。 |
|
onClosed |
false |
回调，火灾一旦ColorBox关闭。 |
7、公共方法：
|
$.colorbox() |
这种方法允许您调用的方式而无需将它分配给一个元素。.colorbox美元（的HREF：“login.php”{ }）； |
|
$.colorbox.next() |
这些方法移动到下一个和上一组的项目，按“下一步”或“前进”按钮相同。 |
|
$.colorbox.close() |
此方法启动关闭序列，不立即完成。灯箱将完全关闭，只有当cbox_closed事件/亲密的回调是解雇 |
|
$.colorbox.element() |
此方法用于获取方式是与当前的HTML元素。返回一个包含元素的jQuery对象。var $element = $.colorbox.element(); |
|
$.colorbox.resize() |
这允许的方式来调整基于自己的自动计算，或为特定的大小。这一定是Colorbox之后的内容有手动加载称为。可选的参数对象可以接受宽度或innerwidth和高度或innerheight。没有指定宽度或高度，ColorBox会尝试重新计算其当前内容的高度。 |
|
$.colorbox.remove() |
删除所有痕迹的方式从文件。不一样的方式（），其中美元。把颜色框起来供以后使用。 |
8、colorbox事件
|
cbox_open |
|
当Colorbox第一次打开触发器，但在几个关键变量的赋值发生。 |
|
cbox_load |
|
触发器在开始的阶段，内容类型确定装。 |
|
cbox_complete |
|
触发时，过渡已经完成，新加载的内容已被发现。 |
|
cbox_cleanup |
|
触发器为关闭方法开始。 |
|
cbox_closed |
|
触发器为近端的方法 |