Colorbox弹出层插件使用API与中文教程

本文演示了ColorBox有六个调用方法，五种风格。其中第一种已翻译，其余4种类型请自己领悟哈。ColorBox有丰富的参数配置，及其简单的调用配置，支持单张图片展示，图片组展示，html代码显示，支持框架Iframe，支持远程ajax加载。

分类：悬浮层/弹出层 > 弹窗难易：中级

查看演示下载资源下载积分： 20 积分

引入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&ouml;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>