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

});

});

總結

以上是生活随笔為你收集整理的colorbox ajax,Colorbox弹出层插件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。