Colorbox | 强大的jQuery轻量级Lightbox插件_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

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.