本文演示了ColorBox有六个调用方法,五种风格。其中第一种已翻译,其余4种类型请自己领悟哈。ColorBox有丰富的参数配置,及其简单的调用配置,支持单张图片展示,图片组展示,html代码显示,支持框架Iframe,支持远程ajax加载。
引入colorbox插件
<link rel="stylesheet" href="colorbox.css" />
<script type="text/javascript" src="jquery.min.js"></script>
<script src="jquery.colorbox.js"></script>
相片组HTML代码
<p><a class="group1" href="content/ohoopee1.jpg" title="我的祖父和我在池塘">相册 1</a></p>
<p><a class="group1" href="content/ohoopee2.jpg" title="我小时候在池塘">相册 2</a></p>
<p><a class="group1" href="content/ohoopee3.jpg" title="我成年时候在池塘">相册 3</a></p>
演示一:Elastic Transition弹性过渡效果
rel指定了 class='group1'作为colorbox的相册
$(".group1").colorbox({rel: 'group1'});
演示二:Fade Transition淡入淡出
$(".group2").colorbox({rel: 'group2', transition: "fade"});
演示三:无过渡效果并且固定宽高(75%的显示屏尺寸)
$(".group3").colorbox({rel: 'group3', transition: "none", width: "75%", height: "75%"});
演示四:滑动效果
$(".group4").colorbox({rel: 'group4', slideshow: true});
演示五:其他内容类型
<p><a class='ajax' href="content/ajax.html" title="Homer Defined">ajax加载远程html文件</a></p>
<p><a class='vimeo' href="http://player.vimeo.com/video/2285902" title="Röyksopp: Remind Me">Flash / Video</a></p>
<p><a class='iframe' href="http://www.sucaihuo.com">网页iframe</a></p>
<p><a class='inline' href="#inline_content">内部内容#inline_content</a></p>
$(".ajax").colorbox();
$(".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 即将打开');
},
onLoad: function() {
alert('onLoad: colorbox已经开始加载目标内容');
},
onComplete: function() {
alert('onComplete: colorbox已显示加载内容');
},
onCleanup: function() {
alert('onCleanup: colorbox已经开始关闭过程');
},
onClosed: function() {
alert('onClosed: colorbox完全关闭');
}
});
其他colorbox4种风格演示效果未翻译:<a href='http://www.sucaihuo.com/jquery/4/491/demo/example2/'>colorbox相册分组2</a>,<a href='http://www.sucaihuo.com/jquery/4/491/demo/example3/'>colorbox相册分组3</a>,<a href='http://www.sucaihuo.com/jquery/4/491/demo/example4/'>colorbox相册分组4</a>,<a href='http://www.sucaihuo.com/jquery/4/491/demo/example5/'>colorbox相册分组5</a>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791