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 type = "text/javascript" src = "jquery.colorbox-min.js" >

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'  } ) ;
     } ) ;

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:” Hello ”});
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