ColorBox是一款功能强大的轻量级jQuery Lightbox插件。ColorBox支持图片展示、图片分组、幻灯片、行内样式和iframe内容。该lightbox插件的兼容性极好，可以兼容IE7+的IE浏览器。它的特点有：

  • 支持图片展示、图片分组、幻灯片、行内样式和iframe内容。
  • 轻量级：没压缩版本有10k大小，压缩版本仅5kb。
  • 通过CSS控制lightbox的外观，十分容易定制。
  • 可扩展的回调和事件。
  • 提供众多参数控制。
  • 可预加载图片组中的图片。

使用方法

使用ColorBox需要引入jQuery和jquery.colorbox.js文件以及colorbox.css文件。

<link rel="stylesheet" href="colorbox.css" />             
<script src="jquery/2.1.4/jquery.min.js"></script>
<script src="dist/jquery.colorbox.js"></script>
初始化插件

Colorbox可以接受键值对形式的参数对象。

// Format:
$(selector).colorbox({key:value, key:value, key:value});
// Examples:
// Image links displayed as a group
$('a.gallery').colorbox({rel:'gal'});

// Ajax
$('a#login').colorbox();

// Called directly, without assignment to an element:
$.colorbox({href:"thankyou.html"});

// Called directly with HTML
$.colorbox({html:"<h1>Welcome</h1>"});

// Colorbox can accept a function in place of a static value:
$("a.gallery").colorbox({rel: 'gal', title: function(){
  var url = $(this).attr('href');
  return '<a href="' + url + '" target="_blank">Open In New Window</a>';
}});

配置参数

参数 默认值 描述
transition "elastic" 过渡动画类型。可设置为"elastic", "fade", "none"
speed 350 过渡动画的速度。单位毫秒
href false 该参数用于替换锚链接，或一个无URL连接的元素，如图片，或表单按钮
$("h1").colorbox({href:"welcome.html"});
rel false 这个参数可以作为一个锚REL的替代方式。它允许用户将任何元素组合为一个组，制作图片画廊
scalePhotos true 如果为true并且定义了maxWidth、maxHeight、innerWidth、innerHeight、width或height 属性，Colorbox将缩放图片以适应这些值
scrolling true 如果为false，Colorbox 将隐藏滚动条
opacity 0.85 遮罩层的透明度。值从0-1
open false 如果为true，Colorbox会立刻打开
returnFocus true 如果为true，当Colorbox存在元素的时候会被聚焦
trapFocus true 如果为true，Colorbox的键盘控制导航和内容将被限制
fastIframe true 如果为false，加载的图片会被移除，onComplete事件会被延迟直到iframe的内容加载完毕
preloading true 运行在组中预加载前一幅和下一幅图片
overlayClose true 如果为false，禁止点击遮罩层关闭Colorbox
escKey true 如果为false，将禁止使用“ESC”键关闭Colorbox
arrowKey true 如果为false，将禁止在组中使用前后导航箭头按钮
loop true 如果为false，图片组将不会循环
data false 通过ajax请求提交的GET或POST的值
className false 为colorbox 和遮罩层添加一个给定的class名称
fadeOut 300 设置关闭Colorbox时fadeOut效果的速度，单位毫秒
closeButton true Colorbox的关闭按钮
国际化参数设置
参数 默认值 描述
current "image {current} of {total}" 图片组中图片数量。{current} 和 {total}在运行时会被替换
previous "previous" 前一张图片按钮的显示文字
next "next" 下一张图片按钮的显示文字
close "close" 关闭按钮上的显示文字。“ESC”键也可以关闭Colorbox
xhrError "This content failed to load." 指定的ajax调用的内容没有被正确加载时显示的文字
imgError "This image failed to load." 图片内容没有被加载时显示的文字
内容类型
参数 默认值 描述
iframe false 如果为true，指定的内容会被显示在iFrame中
inline false 如果为true，当前文档的内容可以通过传入一个带jQuery选择器的href作为参数来显示内容
html false 显示一个HTML的字符串
$.colorbox({html:"

Hello

"});
photo false 如果为true，会强制Colorbox将一个链接显示为图片
ajax This property isn't actually used as Colorbox assumes all hrefs should be treated as either ajax or photos, unless one of the other content types were specified.

关于Colorbox更加详细的参数和方法事件请参考官方网站：http://www.jacklmoore.com/colorbox/