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;
});
});
總結
以上是生活随笔為你收集整理的colorbox ajax,Colorbox弹出层插件的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： android适配器
- 下一篇： jQuery弹窗组件 colorbox