jquery弹出层插件jquery.ColorBox.js学习

晋承运

2023-12-01

第一、简介

ColorBox可以播放单张图片，组图片，视频，打开新html，内嵌iframe，甚至html标签等，注意它是弹出层插件，不是用于基本页面展示的。而且一次只能弹出一个，新弹框复用以前的弹框，弹出层再弹出层是没有的。
官方的例子提供了5种风格样式，引入不同的css页面展示不同的效果。ColorBox有丰富的参数配置，及其简单的调用方法。
这些配置以及js文件,5种风格样式css都可以在源码里拿到，其中jquery不要求版本，当然最好是最新的。
官网
 gitHub上源码
 效果展示

第二、上个简单的例子

<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8'/>
        <title>Colorbox Examples</title>
        <link rel="stylesheet" href="colorbox.css" />
        <script type="text/javascript" src="../jquery-1.9.1.min.js"></script>
        <script type="text/javascript" src="../jquery.colorbox.js"></script>
        <script type="text/javascript">
            $(document).ready(function(){
                $("#single").colorbox({transition: "fade"});
            });
        </script>
    </head>
    <body>
        <a class="group1" id="single" href="../content/ohoopee1.jpg" title="展示">Grouped Photo 11</a> 
    </body>
</html>

前面的引入js和css文件就不必说了，下面有详细介绍，我们关注的是a超链接，指定的超链接的弹出图片，然后在script脚本文件里使用colorbox插件初始化一下$("#single").colorbox({transition: "fade"});即可使用插件的效果弹出图片了，是不是很简单。

第三、基本使用

引入2个js文件jquery.colorbox.js和jquery.js。当然生成环境要使用压缩版的jquery.colorbox.min.js和jquery.min.js
引入1个css文件colorbox.css，注意引入不同皮肤的css文件将实现不同的皮肤。5种风格样式在源码例子里。

<link rel="stylesheet" href="colorbox.css" />
<script type="text/javascript" src="../jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="../jquery.colorbox.js"></script>

使用语法

$(selector).colorbox({key:value, key:value, key:value});

3.1单张图片

单张图片直接使用colorbox()方法即可，也可使用些参数，如下：

<script type="text/javascript">
    $(document).ready(function(){

                //Examples of how to assign the Colorbox event to elements

                //$(".group1").colorbox({rel:'group1'});
                $("#single").colorbox({transition: "fade"});
            });
</script>
<body>
        <a class="group1" id="single" href="../content/ohoopee1.jpg" title="展示">Grouped Photo 11</a>
</body>

3.2组相册图片

使用colorbox的rel参数可以图片作为colorbox的相册。rel指定的对象（class）即可做为相册图片。

$(".group1").colorbox({rel: 'group1'});

3.3 弹出效果

图片弹出的效果，设置colorbox方法的参数
1.Fade Transition淡入淡出

$(".group2").colorbox({rel: 'group2', transition: "fade"});

2.滑动效果

$(".group4").colorbox({rel: 'group4', slideshow: true});

3.无效果，指定弹出图片宽高
无过渡效果并且固定宽高（75%的显示屏尺寸）

$(".group3").colorbox({rel: 'group3', transition: "none", width: "75%", height: "75%"});

3.4 显示html

1.以独立html文件格式组织

比如testOutHtml.html

<div id='homer' style="background:url(../content/homer.jpg) right center no-repeat #ececec; height:135px; width:280px; padding:30px 10px;">
    <strong>Homer</strong><br/>
    <em>\noun\</em><br/>
    <strong>1.</strong> American bonehead<br/>
    <strong>2. Pull a Homer-</strong><br/>
    to succeed despite<br/>
    idiocy
</div>
<script>
    $('#homer strong').css({color:'red'});
</script>

使用colorBox调用方式如下：

$(".testOutHtml").colorbox();
<p><a class='testOutHtml' href="testOutHtml.html" title="Homer Defined">外部html</a></p>

2.以内部html元素组织

比如html里有如下html元素

<div style='display:none'>
    <div id='inline_content' style='padding:10px; background:#fff;'>
        <p><strong>This content comes from a hidden element on this page.</strong></p>
        <p>The inline option preserves bound JavaScript events and changes, and it puts the content back where it came from when it is closed.</p>
        <p><a id="click" href="#" style='padding:5px; background:#ccc;'>Click me, it will be preserved!</a></p>

        <p><strong>If you try to open a new Colorbox while it is already open, it will update itself with the new content.</strong></p>
        <p>Updating Content Example:<br />
        <a class="ajax" href="../content/ajax.html">Click here to load new content</a></p>
        </div>
</div>

调用方式如下：

$(".inline").colorbox({inline:true, width:"50%"});
//指定具体宽度$(".inline").colorbox({inline:true, innerWidth:640, innerHeight:390});
<p><a class='inline' href="#inline_content">Inline HTML</a></p>

3.网页iframe

$(".iframe").colorbox({iframe:true, width:"80%", height:"80%"});
<p><a class='iframe' href="http://www.baidu.com">网页iframe</a></p>

4.直接写html元素

$("#single").colorbox({html:"<h3>Welcome</h3>"});
//$.colorbox({html:"<h3>Welcome</h3>"});//直接使用公开方法$.colorbox

3.5回调函数

$(".callbacksA").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'); }
});
<a class='callbacksA' href="../content/marylou.jpg" title="测试回调函数">测试回调函数</a>.

第四、属性配置

下面介绍属性配置，更详细的可去官文上看。

1.基本属性

属性	默认值	描述
transition	elastic	过渡型。可以设置为“elastic”，“fade”，或“none”。
speed	350	效果切换速度，以毫秒为单位。
href	false	这可以被用来作为一种替代锚URL或联想到的URL非锚的元素，如图片或表格按钮。$（“H1”.colorbox（的HREF）{ }”的民族性与地域性：”）；
title	false	这可以作为一个锚定的方式－。
rel	false	这可以作为一个锚REL的替代方式。这允许用户在一个画廊集团任何元素的组合，或改变现有的关系所以元素不归。
scalePhotos	true	如果是真的，如果最大，最大高度，innerwidth，innerheight，宽度或高度已经确定，ColorBox会规模的照片符合这些价值观。
scrolling	true	如果为false，ColorBox将隐藏溢出内容滚动条。这可以用于与调整相结合的方法（见下文）为一个平稳的过渡，如果你添加内容到方式已经打开的一个实例。
opacity	0.85	叠加的不透明度。范围：0到1。
open	false	如果属实，将立即打开方式。
loop	true	如果为假，将禁用环回组开始时的最后一个元素的能力。
arrowKey	true	如果为假，将禁用左、右方向键从组中的项目之间导航。
escKey	true	如果为假，将禁用“ESC”键关闭方式
fadeOut	300	毫秒淡出速度，集，当关闭方式。
closeButton	true	设置为false将关闭按钮。

2.Content Type

属性	默认值	描述
iframe	false	如果是真的，指定的内容应在iframe中显示。如果是真的，从当前文档的内容可以通过href属性jQuery选择器显示jQuery对象
inline	false	使用A /选择器：$（“#内联”.colorbox（）{内嵌链接：威胁：“# myform”}）；
html		For displaying a string of HTML or text: $.colorbox({html:”Hello”});

3.Dimensions

属性	默认值	描述
width		设定一个固定的总宽度。这包括边框和按钮。例如：“100%”、“500px”，或500
height		设定一个固定的总高度。这包括边框和按钮。例如：“100%”、“500px”，或500
innerWidth		这是一个替代“宽度”用来设置一个固定的内部宽度。这不包括边框和按钮。例如：“50%”、“500px”，或500
innerHeight		这是另一种“高度”用来设置一个固定的内部高度。这不包括边框和按钮。例如：“50%”、“500px”，或500
initialWidth	300	设置初始宽度，正在加载任何内容之前。
initialHeight	100	设置初始高度，正在加载任何内容之前。
maxWidth		设置内容的最大宽度。例如：“100%”，500，“500px”
maxHeight		设置内容的最大高度。例如：“100%”，500，“500px”

4.Slideshow

属性	默认值	描述
slideshow	false	如果是真的，增加了一个自动的幻灯片内容组/画廊。
slideshowSpeed	2500	设置幻灯片的速度，以毫秒为单位。
slideshowAuto	true	如果是真的，幻灯片将自动开始播放。
slideshowStart	“start slideshow”	为幻灯片开始按钮文字。
slideshowStop	“stop slideshow”	停止自动滑动按钮的文本

5.位置

属性	默认值	描述
fixed	false	如果是真的，颜色框将显示在一个固定的位置，在游客的视口。这是不同于默认的绝对定位相对于文档。
top	false	接受一个像素或百分比值（50，“50px”、“10%”）。而不是使用被集中在视口的默认位置控制方式的垂直定位。
bottom	false	接受一个像素或百分比值（50，“50px”、“10%”）。而不是使用被集中在视口的默认位置控制方式的垂直定位。
left	false	接受一个像素或百分比值（50，“50px”、“10%”）。控制方式的水平定位而不是使用被集中在视口的默认位置。
right	false	接受一个像素或百分比值（50，“50px”、“10%”）。控制方式的水平定位而不是使用被集中在视口的默认位置。
reposition	true	复位方式如果窗口的Resize事件触发。

6.元素上的回调函数

属性	描述
onOpen	弹出层刚打开前
onLoad	在试图加载目标内容前
onComplete	目标内容加载完成
onCleanup	在关闭ue
onClosed	关闭触发

使用方法，在绑定的元素上操作

$(".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'); }
    });

7.公共方法

属性	描述
$.colorbox()	可以在不绑定到某个元素的情况下直接调用，如$.colorbox({href:’../content/ajax.html’});但注意，测试必需在tomcat等服务器上测试，本地测试会报“Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.”错误，即不支付使用“file://…方式加载网页”
$.colorbox.next(), $.colorbox.prev()	相当于下一页，上一页功能
$.colorbox.element()	获取前的HTML元素。返回一个包含元素的jQuery对象。var $element =$ .colorbox.element();
$.colorbox.resize()	重新渲染
$.colorbox.remove()	删除colorbox的痕迹，不同于$.colorbox.close(}

使用方法：直接调用

8.公共事件

属性	描述
cbox_open	目标对象刚打开前
cbox_load	目标对象刚加载
cbox_complete	目标对象已经渲染完成
cbox_cleanup	close方法调用之前
cbox_closed	close方法调用之后

使用方法

$(document).bind('cbox_complete', function(){
  setTimeout($.colorbox.next, 1500);
});

第五。总结

引入正确的js和css文件，定位好元素属性，使用colorBox初始化即可。这里要注意，有些成熟的框架引入了colorbox弹出层，它会对colorbox样式做修改，如果你引入colorbox到某个成熟的大框架，发现弹出和效果和例子效果不一样，多半是框架修改了colorbox.css样式。