插件描述:jquery弹出层插件jquery.ColorBox 5种弹出风格
使用说明
1、引入jquery核心库和ColorBox脚本文件
2、引入ColorBox样式表文件,注意引入不同皮肤的css文件将实现不同的皮肤
3、html代码
弹性效果
GroupedPhoto1
Grouped Photo 2
Grouped Photo 3
淡入淡出效果
Grouped Photo 1
Grouped Photo 2
Grouped Photo 3
没有动画效果,高度固定(屏幕大小的75%)
Grouped Photo 1
Grouped Photo 2
Grouped Photo 3
自动播放
Grouped Photo 1
Grouped Photo 2
Grouped Photo 3
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;
});
});