First, introduction

ColorBox can play single pictures, group pictures, videos, open new html, inline iframes, and even html tags, etc. Note that it is a pop-up layer plugin, not for basic page display. And only one pop-up can pop up at a time. The new pop-up box reuses the previous one, and there is no pop-up layer and then a pop-up layer.
The official example provides 5 styles and introduces different CSS pages to display different effects. ColorBox has rich parameter configuration and simple calling method.
These configurations, js files, and 5 styles of css can be obtained in the source code. Among them, jquery does not require a version, of course, it is best to be the latest. The source code effect display on the
official website
gitHub

Second, the last simple example

<!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>

The introduction of js and css files does not need to be said. The following is a detailed introduction. We focus on a hyperlink, the pop-up image of the specified hyperlink, and then use the colorbox plugin in the script script file to initialize it $("#single").colorbox({transition: "fade"});to use the effect of the plugin. The picture pops up, isn't it very simple.

Third, the basic use

Introduce two js files jquery.colorbox.js and jquery.js. Of course, the generation environment should use the compressed version of jquery.colorbox.min.js and jquery.min.js
to introduce a css file colorbox.css. Note that the introduction of css files with different skins will achieve different skins. 5 styles are in the source code example.

<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>

use syntax

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

3.1 Single Image

You can directly use the colorbox() method for a single image, or you can use some parameters, as follows:

<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 Groups of album pictures

Use the rel parameter of colorbox to use the picture as the album of colorbox. The object (class) specified by rel can be used as an album picture.

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

3.3 Popup effect

The effect of the picture pops up, set the parameters of the colorbox method
1.Fade Transition fade in and fade out

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

2. Sliding effect

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

3. No effect, specify the width and height of the pop-up image,
no transition effect and fixed width and height (75% of the display size)

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

3.4 Display html

1. Organized in standalone html file format

For example 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>

The way to use colorBox is as follows:

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

2. Organize with inner html elements

For example, there are the following html elements in 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>

The calling method is as follows:

$(".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. Web iframe

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

4. Write html elements directly

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

3.5 Callback function

$(".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>.

Fourth, attribute configuration

The attribute configuration is described below, and more details can be found in the official document.

1. Basic properties

Attributes	Defaults	describe
transition	elastic	transitional. Can be set to "elastic", "fade", or "none".
speed	350	Effect switching speed, in milliseconds.
href	false	This can be used as an alternative to anchor URLs or to associate URLs with non-anchor elements such as image or table buttons. $("h1".colorbox(href){}"ethnicity and locality:");
title	false	This can be used as a way of anchoring -.
rel	false	This can be used as an alternative to anchor REL. This allows the user to group any elements in a gallery group, or change existing relationships so the elements don't belong.
scalePhotos	true	If true, if max, max-height, innerwidth, innerheight, width or height have been determined, ColorBox will scale the photo to match those values.
scrolling	true	If false, ColorBox will hide the overflow content scrollbar. This can be used in conjunction with the Adjust method (see below) for a smooth transition if you add content to an instance where the method is already open.
opacity	0.85	The opacity of the overlay. Range: 0 to 1.
open	false	If true, the mode will be opened immediately.
loop	true	If false, disables the ability to loop back to the last element at the beginning of the group.
arrowKey	true	If false, the left and right arrow keys will be disabled from navigating between items in the group.
escKey	true	If false, the "ESC" key close method will be disabled
fadeOut	300	Fade out speed in milliseconds, set when closed.
closeButton	true	Set to false to close the button.

2.Content Type

Attributes	Defaults	describe
iframe	false	If true, the specified content should be displayed in the iframe. If true, jQuery objects can be displayed from the content of the current document via the href attribute jQuery selector
inline	false	use a/selector: $("#inline".colorbox(){inlinelink:threat:"#myform"});
html		For displaying a string of HTML or text: $.colorbox({html:”Hello”});

3.Dimensions

Attributes	Defaults	describe
width		Sets a fixed overall width. This includes borders and buttons. For example: "100%", "500px", or 500
height		Set a fixed overall height. This includes borders and buttons. For example: "100%", "500px", or 500
innerWidth		This is an alternative to "width" used to set a fixed inner width. This excludes borders and buttons. For example: "50%", "500px", or 500
innerHeight		This is another "height" used to set a fixed inner height. This excludes borders and buttons. For example: "50%", "500px", or 500
initialWidth	300	Sets the initial width, before any content is loaded.
initialHeight	100	Sets the initial height, before any content is loaded.
maxWidth		Sets the maximum width of the content. For example: "100%", 500, "500px"
maxHeight		Sets the maximum height of the content. For example: "100%", 500, "500px"

4.Slideshow

Attributes	Defaults	describe
slideshow	false	If true, added an automatic slideshow content group/gallery.
slideshowSpeed	2500	Set the speed of the slideshow, in milliseconds.
slideshowAuto	true	If true, the slideshow will start playing automatically.
slideshowStart	“start slideshow”	Start button text for 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样式。

jquery pop-up layer plugin jquery.ColorBox.js learning