原文网址：http://ifxoxo.com/jquery-colorbox.html
一、colorbox介绍
jQuery Colorbox是一款非常好的内容播放插件。
它集弹出层、幻灯片播放功能于一身，不仅于此，它还支持其它的内容格式：例如html, flash, iframe等，这些内容的显示方式都是Ajax的。
更难能可贵的是，在压缩后它只有10K的大小，使用这款插件不会给你的网页带来过多的负担，而且还能实现很棒的视觉效果，为用户体验增色不少。
而且可以更加自己的喜好，修改colorbox弹出框的样式，非常灵活。
本文已经同步至我的个人博客站点：
jquery插件（三）：Colorbox–内容播放插件(http://ifxoxo.com/jquery-colorbox.html)
如果想要看实例，可以到以下网址查看：
520小美女(http://520xmn.com)
colorbox的示例截图如下：
colorbox的截图–ifxoxo.com
Colorbox项目的主页地址是：http://www.jacklmoore.com/colorbox
项目主页中提供了5种不同样式的Example：
样式 1：http://www.jacklmoore.com/colorbox/example1/
样式 2：http://www.jacklmoore.com/colorbox/example2/
样式 3：http://www.jacklmoore.com/colorbox/example3/
样式 4：http://www.jacklmoore.com/colorbox/example4/
样式 5：http://www.jacklmoore.com/colorbox/example5/
每一个 样式 中都提供了以下效果：
- Elastic Transition（弹性动画）
- Fade Transition（淡入淡出动画）
- No transition + fixed width and height 75% of screen size (无动画，宽高以屏幕的75%自适应)
- Slideshow（幻灯片播放）
- Other Content Types （其它类型：外部html, flash和视频，iframe的flash和视频，iframe的外部html，内部html）
二、具体用法
1、需要的js
（1）jquery
既然是jquery插件，肯定是需要先加载jquery的,可以到jquery官网去下载最新的jquery：http://jquery.com/
（2）colorbox
到http://www.jacklmoore.com/colorbox 去下载最新的 color box插件，
在里面找到一个 jquery.colorbox-min.js
如：
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.colorbox-min.js"></script>
2、需要的css
color-box 的弹出框的样式是需要定义的，你可以先查看官网的Example 1-5， 选择一个自己比较喜欢的样式，到下载下来中去寻找相应的example文件夹，找到coloxbox.css。
比如个人喜欢example 5， 那么就加载example5文件夹中的的css
3、需要的html
把你需要用color box这种幻灯片方式加载的内容统一用一个class或者，方面后面提取。如
<p><a class="colorbox1" href="../content/ohoopee2.jpg" >Grouped Photo 2</a></p>
<p><a class="colorbox1" href="../content/ohoopee3.jpg">Grouped Photo 3</a></p>
//这里只是显示了图片，如果你需要加载整个页面，把href替换成相应的页面地址就行
4、调用color box
$(document).ready(function(){
//元素调用Colorbox的示例
$(".colorbox1").colorbox({ rel: 'group1' });
});
</script>
5、color box的其他参数说明
color box 的参数很多，分成几个部分
(1)基础参数
| 参数 | 默认值 | 作用 |
| transition | “elastic” | 弹出窗口的方式，支持”elastic”, “fade”, “none”. |
| speed | 350 | 弹出窗口的速度,单位是ms |
| href | false | 动态指定加载的href |
| title | false | 动态指定链接的title |
| rel | false | 分组功能，分组之后可以通过上一页，下一页查看同一个分组的其他内容。指定了相同ref的元素将分为一组 如：rel:”group1 |
| scalePhotos | true | 如果为true,而且定义maxWidth, maxHeight, innerWidth, innerHeight, width, height 那么会去自动去适配 |
| scrolling | true | 如果为false，那么即使内容超出了弹出框，也会隐藏滚动条 |
| opacity | 0.85 | 弹出框的不透明度，取值范围：0-1 |
| open | false | 如果为true,弹出框会立即自动打开 |
| returnFocus | true | 如果为true, 当关闭弹出框之后，会继续focus原来的元素 |
| preloading | true | 如果为true, 那么在加载当前弹出框的内容之后，会偷偷先加载pre和next的内容 |
| overlayClose | true | 如果为true, 那么点击弹出框之外的内容时，自动关闭弹出框 |
| escKey | true | 如果为true, 那么按esc键之后，自动关闭弹出框 |
| arrowKey | true | 如果为true, 那么允许按下 ← → 去展示 pre和next的内容 |
| loop | true | 如果为true, 那么当最后一页时，点击next会循环到第一页 |
| data | false | 在ajax加载页面时，post 或者 get 过去的数据 |
| fadeOut | 300 | 关闭弹出框的速度，单位是ms |
| closeButton | true | 如果为false, 将会隐藏 关闭 按钮 |
(2)尺寸相关
| 参数 | 默认值 | 作用 |
| width | false | 设置弹出框的宽度,包括弹出框的borders 和 button |
| height | false | 设置弹出框的高度带,包括弹出框的borders 和 button |
| innerWidth | false | 设置弹出框的内部的宽度，（不包括弹出框的borders 和 button） |
| innerHeight | false | 设置弹出框的内部的高度，（不包括弹出框的borders 和 button） |
| initialWidth | 300 | 在内容还没展示时，弹出框默认的宽度 |
| initialHeight | 100 | 在内容还没展示时，弹出框默认的高度 |
| maxWidth | false | 设置一个加载内容的最大宽度。例如：“100%”，500，“500px” |
| maxHeight | false | 设置一个加载内容的最大高度。例如：“100%”，500，“500px”< |
(3)位置相关
| 参数 | 默认值 | 作用 |
| fixed | false | 如果为true,弹出框 将 显示在一个固定的位置 |
| top | false | 设置弹出框的top属性 |
| bottom | false | 设置弹出框的bottom属性 |
| left | false | 设置弹出框的left属性 |
| right | false | 设置弹出框的right属性 |
| reposition | true | 重新加载color box的属性当触发了window的resize事件 |
(4)加载内容的type
| 参数 | 默认值 | 作用 |
| iframe | false | 如果为true,加载的内容将以iframe的方式呈现 |
| inline | false | ;如果为true,将从本页面提取 content, href指定元素的selector $(“#inline”).colorbox({inline:true, href:”#myForm”}); |
| html | false | 将加载这里指定的html内容 $.colorbox({html:” <p>Hello </p>”}); |
| photo | false | 如果为true,将会以photo的方式加载内容 当照片自动检测失败时才需要使用这个参数，(如href是”photo.php”而不是”photo.jpg”,自动检测就会失败) |
| ajax | —blog主也没翻译过来，自行脑补吧— |
(5)一些callback函数定义
| 参数 | 默认值 | 作用 |
| onOpen | false | 当弹出框要即将要open的时候触发 |
| onLoad | false | 当弹出框在load内容的时候触发 |
| onComplete | false | 当弹出内容加载完毕的时候触发 |
| onCleanup | false | 当弹出框要即将要close的时候触发 |
| onClosed | false | 当弹出框close之后的时候触发 |
可以用以下代码尝试一些加载的事件
onOpen:function(){ alert('onOpen: --ifxoxo.com'); },
onLoad:function(){ alert('onLoad: --ifxoxo.com'); },
onComplete:function(){ alert('onComplete: --ifxoxo.com'); },
onCleanup:function(){ alert('onCleanup: --ifxoxo.com'); },
onClosed:function(){ alert('onClosed: --ifxoxo.com'); }
});
还有其他 Slideshow 和 Retina Images的参数，具体查看官网。
6、color box的方法
| 参数 | 作用 |
| next() | 翻开Next的内容 |
| prev() | 翻开prev的内容 |
| close() | 关闭弹出框 |
| element() | 获取当前的html element |
| resize() | 重新加载弹出框的长宽高 |
| remove() | 去掉当前元素的colorbox事件 |
p.s
本文已经同步至我的个人博客站点：
jquery插件（三）：Colorbox–内容播放插件(http://ifxoxo.com/jquery-colorbox.html)
如果想要看实例，可以到以下网址查看：
http://520xmn.com