colorBox 介绍
ColorBox可以播放单张图片，组图片，视频，打开新html，内嵌iframe，甚至html标签等，注意它是弹出层插件，不是用于基本页面展示的。而且一次只能弹出一个，新弹框复用以前的弹框，弹出层再弹出层是没有的。
ColorBox集弹出层、幻灯片播放功能于一身，不仅于此，它还支持其它的内容格式：例如html,flash,iframe等，这些内容的显示方式都是Ajax的。
更难能可贵的是，在压缩后它只有10K的大小，使用这款插件不会给你的网页带来过多的负担，而且还能实现很棒的视觉效果，为用户体验增色不少。
而且可以更加自己的喜好，修改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;
});
});
网站地址:http://www.jacklmoore.com/colorbox/
GitHub:https://github.com/jackmoore/colorbox
网站描述:jquery弹出层插件
colorbox
官方网站：http://www.jacklmoore.com/colorbox/
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。