jquery插件（三）：Colorbox–内容播放插件

一、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

<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替换成相应的页面地址就行

4、调用color box

<script>
    $(document).ready(function(){
        //元素调用Colorbox的示例
        $(".colorbox1").colorbox({ rel: 'group1' });
    });
</script>

5、color box的其他参数说明

color box 的参数很多，分成几个部分

(1)基础参数

 参数 默认值 作用  transition  “elastic” 弹出窗口的方式，支持”elastic”, “fade”, “none”. speed  350 弹出窗口的速度,单位是mshreffalse动态指定加载的hreftitlefalse动态指定链接的titlerelfalse分组功能，分组之后可以通过上一页，下一页查看同一个分组的其他内容。指定了相同ref的元素将分为一组
如：rel:”group1scalePhotostrue如果为true,而且定义maxWidth, maxHeight, innerWidth, innerHeight, width, height
那么会去自动去适配scrollingtrue如果为false，那么即使内容超出了弹出框，也会隐藏滚动条opacity0.85弹出框的不透明度，取值范围：0-1openfalse如果为true,弹出框会立即自动打开returnFocustrue如果为true, 当关闭弹出框之后，会继续focus原来的元素preloadingtrue如果为true, 那么在加载当前弹出框的内容之后，会偷偷先加载pre和next的内容overlayClosetrue如果为true, 那么点击弹出框之外的内容时，自动关闭弹出框escKeytrue如果为true, 那么按esc键之后，自动关闭弹出框arrowKeytrue如果为true, 那么允许按下 ← → 去展示 pre和next的内容looptrue如果为true, 那么当最后一页时，点击next会循环到第一页datafalse在ajax加载页面时，post 或者 get 过去的数据fadeOut300关闭弹出框的速度，单位是mscloseButtontrue如果为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'); }
});

还有其他 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