COLORBOX文档

标签：

 1,flash覆盖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‘); }

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文件。

 初始化插件

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

 配置参数

 国际化参数设置

 内容类型

使用说明

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

COLORBOX文档

标签：

原文地址：http://www.cnblogs.com/mfc-itblog/p/5138309.html