COLORBOX文档

1,flash覆盖colorbox:

2,colorbox在ie中的位置和行为异常:

3,colorbox的位置和行为异常（不区分浏览器）:

4,用colorbox显示外部文档时显示不正确:

5,在ie中colorbox的边框不显示:

6,尝试载入外部页面却获得”Request unsuccessful”的报错信息

7,如何通过rel属性关闭colorbox的群组功能

8,JavaScript/jQuery 在colorbox中不工作

9,在iframe外面打开colorbox

• 支持 照片，照片组，幻灯片，ajax，内联 和 iframe 框架。
• 通过CSS 控制外观，使用用户可以很容易重新定制外观。
• 不需要更改 ColorBox 的 javascript 文件就可以重新设定其行为。
• 可以依靠 callback & event-hooks 进行拓展，不需要修改源代码。
• 非常友好，不需要修改现有的 HTML，所有的选项都通过 JS 设置。

  介绍

  colorbox()函数使用一堆key/value对象和一个可选的callback函数

  格式：$('selector').colorbox({key:value}, callback);

  例子： $('a.gallery').colorbox({transition:'fade', speed:500});

  还是例子：$('button').colorbox({href:"thankyou.html"});

  设置的值	默认值	介绍
  transition	"elastic"	过渡效果，可以是"elastic", "fade", or "none".
  speed	350	设置过渡效果的持续时间，毫秒
  href	false	Example:$('h1').colorbox({href:"welcome.html"}) 这个用来设置一个锚标记的值或者一个不是锚的元素，例如图像或者表单的按钮，例如：
  title	false	这可以为Colorbox设置一个标题
  rel	false	Example:$('#example a').colorbox({rel:'group1'}) 这个可以根据元素的rel属性设置要显示的元素集合，也可以覆盖一个存在的rel属性
  width	false	Example: "100%", "500px", or 500 设置宽度，包括边框和按钮
  height	false	Example: "100%", "500px", or 500 设置高度，包括边框和按钮
  innerWidth	false	Example: "50%", "500px", or 500 这个可以设定一个固定的内大小，包括边框和按钮
  innerHeight	false	Example: "50%", "500px", or 500 这个可以设定一个固定的内高度，包括边框和按钮
  initialWidth	300	设置初始化宽度
  initialHeight	100	设置初始化高度
  maxWidth	false	Example: "100%", 500, "500px" 设置内容的最大宽度
  maxHeight	false	Example: "100%", 500, "500px" 设置内容的最大高度
  scalePhotos	true	如果是true且maxWidth, maxHeight, innerWidth, innerHeight, width, 或者 height 被设置， Colorbox会缩放图片以使用边框
  scrolling	true	如果是false,Colorbox不会为了溢出元素设置滚动条
  iframe	false	如果是true，元素会在Iframe中显示
  inline	false	Example: $("#inline").colorbox({inline:true, href:"#myForm"}); 如果是true,jQuery选择器可以用来选择要显示的元素。例如：
  html	false	Example:  $.fn.colorbox({html:' 这个是直接让你显示HTML代码，例 Hello '});
  photo	false	如果为true，ColorBox只会把元素按照图片显示，防止类似photo.php?pic=1这样的连接被误认为是网页
  opacity	0.85	遮罩层不透明度 从0-1之间取值
  open	false	如果为true,ColorBox会自动开启
  preloading	true	如果为True,ColorBox会自动预载要显示图片
  overlayClose	true	为true单击遮罩层就可以把ColorBox关闭
  slideshow	false	为True，会自动滚动图片
  slideshowSpeed	2500	设置时间，毫秒
  slideshowAuto	true	为tuue，滑动会自动开始
  slideshowStart	"start slideshow"	开始自动滑动按钮的文本
  slideshowStop	"stop slideshow"	停止自动滑动按钮的文本
  current	"{current} of {total}"	文本内容：现在正在显示的元素序号
  previous	"previous"	“上一个”按钮的文本
  next	"next"	“下一个”按钮的文本
  close	"close"	“关闭”按钮的文本

======================================================================

常用事件：
    onOpen:function(){ alert('onOpen: colorbox is about to open'); },
    onLoad:function(){ alert('onLoad: colorbox has started to load the targeted content'); },
    onComplete:function(){ alert('onComplete: colorbox has displayed the loaded content'); },
    onCleanup:function(){ alert('onCleanup: colorbox has begun the close process'); },
    onClosed:function(){ alert('onClosed: colorbox has completely closed'); }

colorbox常见问题

http://wxinpeng.javaeye.com/blog/737230

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.

使用说明

1、引入jquery核心库和ColorBox脚本文件

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> 
<script src="../colorbox/jquery.colorbox.js"></script>

2、引入ColorBox样式表文件，注意引入不同皮肤的css文件将实现不同的皮肤

<link media="screen" rel="stylesheet" href="colorbox.css" />

3、html代码

<h2>弹性效果</h2>
<p>
  <a href="../content/ohoopee1.jpg"rel="example1" title="Me and my">GroupedPhoto1</a>
</p>
<p>
  <a href="../content/ohoopee2.jpg"rel="example1" title="On the Ohoopee">Grouped Photo 2</a>
</p>
<p>
  <a href="../content/ohoopee3.jpg"rel="example1" title="On the Ohoopee">Grouped Photo 3</a>
</p>
<h2>淡入淡出效果</h2>
<p>
  <a href="../content/ohoopee1.jpg"rel="example2" title="Me and my">Grouped Photo 1</a>
</p>
<p>
  <a href="../content/ohoopee2.jpg"rel="example2" title="On the">Grouped Photo 2</a>
</p>
<p>
  <a href="../content/ohoopee3.jpg"rel="example2" title="On the Ohoopee">Grouped Photo 3</a>
</p>
<h2>没有动画效果，高度固定（屏幕大小的75%）</h2>
<p>
  <a href="../content/ohoopee1.jpg"rel="example3" title="Me and my">Grouped Photo 1</a>
</p>
<p>
  <a href="../content/ohoopee2.jpg"rel="example3" title="On the">Grouped Photo 2</a>
</p>
<p>
  <a href="../content/ohoopee3.jpg"rel="example3" title="On the Ohoopee">Grouped Photo 3</a>
</p>
<h2>自动播放</h2>
<p>
  <a href="../content/ohoopee1.jpg"rel="example4" title="Me">Grouped Photo 1</a>
</p>
<p>
  <a href="../content/ohoopee2.jpg"rel="example4" title="On the Ohoopee">Grouped Photo 2</a>
</p>
<p>
  <a href="../content/ohoopee3.jpg"rel="example4" title="On">Grouped Photo 3</a>
</p>

4、jquery初始化代码

$(document).ready(function() {
	//Examples of how to assign the Colorbox event to elements
	$(".group1").colorbox({
		rel: 'group1'
	});
	$(".group2").colorbox({
		rel: 'group2',
		transition: "fade"
	});
	$(".group3").colorbox({
		rel: 'group3',
		transition: "none",
		width: "75%",
		height: "75%"
	});
	$(".group4").colorbox({
		rel: 'group4',
		slideshow: true
	});
	$(".ajax").colorbox();
	$(".youtube").colorbox({
		iframe: true,
		innerWidth: 640,
		innerHeight: 390
	});
	$(".vimeo").colorbox({
		iframe: true,
		innerWidth: 500,
		innerHeight: 409
	});
	$(".iframe").colorbox({
		iframe: true,
		width: "80%",
		height: "80%"
	});
	$(".inline").colorbox({
		inline: true,
		width: "50%"
	});
	$(".callbacks").colorbox({
		onOpen: function() {
			alert('onOpen: colorbox is about to open');
		},
		onLoad: function() {
			alert('onLoad: colorbox has started to load the targeted content');
		},
		onComplete: function() {
			alert('onComplete: colorbox has displayed the loaded content');
		},
		onCleanup: function() {
			alert('onCleanup: colorbox has begun the close process');
		},
		onClosed: function() {
			alert('onClosed: colorbox has completely closed');
		}
	});
	$('.non-retina').colorbox({
		rel: 'group5',
		transition: 'none'
	}) $('.retina').colorbox({
		rel: 'group5',
		transition: 'none',
		retinaImage: true,
		retinaUrl: true
	});
	//Example of preserving a JavaScript event for inline calls.
	$("#click").click(function() {
		$('#click').css({
			"background-color": "#f00",
			"color": "#fff",
			"cursor": "inherit"
		}).text("Open this window again and this message will still be here.");
		return false;
	});
});