1、需要的js
（1）jquery
（2）colorbox (http://www.jacklmoore.com/colorbox/ 下载文件夹，其中有js、css文件)
//加载的时候注意文件的路径
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.colorbox-min.js"></script>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery.colorbox-min.js"></script>
2、需要的css
Example 1-5， 选择一个自己比较喜欢的样式
<link media="screen" rel="stylesheet" href="example5/colorbox.css" />
3、需要的html
把你需要用color box这种幻灯片方式加载的内容统一用一个class或者，方面后面提取。如
<p><a class="colorbox1" href="../content/ohoopee1.jpg" >Grouped Photo 1</a></p>
<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替换成相应的页面地址就行
<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、调用colorbox
<script>
$(document).ready(function(){
//元素调用Colorbox的示例
$(".colorbox1").colorbox({ rel: 'group1' });
});
</script>
$(document).ready(function(){
//元素调用Colorbox的示例
$(".colorbox1").colorbox({ rel: 'group1' });
});
</script>
5、colorbox的其他参数说明
colorbox 的参数很多，分成几个部分
(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之后的时候触发 |
可以用以下代码尝试一些加载的事件
$
(".callbacks").colorbox({
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'); }
});
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事件 |
例子：
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试colorbox插件</title>
{#需要引入js、css文件#}
<script src="{% static "components/jquery/dist/jquery.js" %}"></script>
<script type="text/javascript" src="{% static "ace_source/components/jquery-colorbox/jquery.colorbox.min.js" %}"></script>
{#提供example(1~5)种样式#}
<link rel="stylesheet" href="{% static "ace_source/components/jquery-colorbox/example1/colorbox.css" %}"/>
</head>
<body>
<a title="图片1" href="http://img1.360buyimg.com/da/jfs/t1/9760/30/2437/82328/5bd27862Ef32f4f19/7f9d55580263eed8.jpg" data-rel="colorbox">放大图片</a>
<a title="图片2" href="http://m.360buyimg.com/babel/jfs/t1/17230/3/997/97174/5c0e3760E1f8e39b1/dac2cec089ccd5c0.jpg" data-rel="colorbox">放大图片</a>
</body>
</html>
<script>
$('[data-rel="colorbox"]').colorbox({
rel: 'group_1', //分组
transition: "elastic", //弹出窗口的方式，支持”elastic”, “fade”, “none”
speed: 350, //弹出速度
open: false, //自动打开
slideshow: true, //轮播方式
reposition: true,
scalePhotos: true,
scrolling: false,//滑动
previous:"pre",//上一页文本
next:"next", //下一页文本
close:"关闭",//关闭文本
escKey:true,//esc关闭
closeButton: true,//关闭按钮
current: '{current} of {total}', //组计数器。{current}和{total}为当前页和总数页
maxWidth: '50%',
maxHeight: '50%',
onOpen: function () {
$overflow = document.body.style.overflow;
document.body.style.overflow = 'hidden';
},
onClosed: function () {
document.body.style.overflow = $overflow;
},
onComplete: function () {
$.colorbox.resize();
}
});
</script>