ColorBox可以播放单张图片，组图片，视频，打开新html，内嵌iframe，甚至html标签等，注意它是弹出层插件，不是用于基本页面展示的。而且一次只能弹出一个，新弹框复用以前的弹框，弹出层再弹出层是没有的。
ColorBox集弹出层、幻灯片播放功能于一身，不仅于此，它还支持其它的内容格式：例如html, flash, iframe等，这些内容的显示方式都是Ajax的。
更难能可贵的是，在压缩后它只有10K的大小，使用这款插件不会给你的网页带来过多的负担，而且还能实现很棒的视觉效果，为用户体验增色不少。
而且可以更加自己的喜好，修改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;
});
});
链接: https://fly63.com/nav/1668
