colorbox ajax,Colorbox弹出层插件

插件描述：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;

});

});