Colorbox - a jQuery lightbox

A lightweight customizable lightbox plugin for jQuery


Fork me on GitHub

View Demos

1 2 3 4 5

Download

Released under the MIT License.  Source on Github (changelog).
Compatible with: jQuery 1.3.2+ in Firefox, Safari, Chrome, Opera, Internet Explorer 7+
Bower Package: jquery-colorbox

  • Supports photos, grouping, slideshow, ajax, inline, and iframed content.
  • Lightweight: 10KB of JavaScript (less than 5KBs gzipped).
  • Appearance is controlled through CSS so it can be restyled.
  • Can be extended with callbacks & event-hooks without altering the source files.
  • Completely unobtrusive, options are set in the JS and require no changes to existing HTML.
  • Preloads upcoming images in a photo group.
  • Currently used on more than 1.9 million websites.

Instructions & Help

The FAQ has instructions on asking for help, solutions to common problems, and how-to examples. First-time jQuery users can check out the Colorbox Beginner's Guide. Intermediate users can probably glean everything needed by view-source'ing the demo pages.

Usage

Colorbox accepts settings from an object of key/value pairs, and can be assigned to any HTML element.

// Format:
$(selector).colorbox({key:value, key:value, key:value});
// Examples:
// Image links displayed as a group
$('a.gallery').colorbox({rel:'gal'}); // Ajax
$('a#login').colorbox(); // Called directly, without assignment to an element:
$.colorbox({href:"thankyou.html"}); // Called directly with HTML
$.colorbox({html:"<h1>Welcome</h1>"}); // Colorbox can accept a function in place of a static value:
$("a.gallery").colorbox({rel: 'gal', title: function(){
var url = $(this).attr('href');
return '<a href="' + url + '" target="_blank">Open In New Window</a>';
}});

Settings

Property     Default     Description  
transition     "elastic"     The transition type. Can be set to "elastic", "fade", or "none".  
speed     350     Sets the speed of the fade and elastic transitions, in milliseconds.  
href     false     This can be used as an alternative anchor URL or to associate a URL for non-anchor elements such as images or form buttons. $("h1").colorbox({href:"welcome.html"});  
title     false     This can be used as an anchor title alternative for Colorbox.  
rel     false     This can be used as an anchor rel alternative for Colorbox.  This allows the user to group any combination of elements together for a gallery, or to override an existing rel so elements are not grouped together.  $("a.gallery").colorbox({rel:"group1"}); Note: The value can also be set to 'nofollow' to disable grouping.  
scalePhotos     true     If true, and if maxWidth, maxHeight, innerWidth, innerHeight, width, or height have been defined, Colorbox will scale photos to fit within the those values.  
scrolling     true     If false, Colorbox will hide scrollbars for overflowing content.  This could be used on conjunction with the resize method (see below) for a smoother transition if you are appending content to an already open instance of Colorbox.  
opacity     0.85     The overlay opacity level. Range: 0 to 1.  
open     false     If true, Colorbox will immediately open.  
returnFocus     true     If true, focus will be returned when Colorbox exits to the element it was launched from.  
trapFocus     true     If true, keyboard focus will be limited to Colorbox's navigation and content.  
fastIframe     true     If false, the loading graphic removal and onComplete event will be delayed until iframe's content has completely loaded.  
preloading     true     Allows for preloading of 'Next' and 'Previous' content in a group, after the current content has finished loading.  Set to false to disable.  
overlayClose     true     If false, disables closing Colorbox by clicking on the background overlay.  
escKey     true     If false, will disable closing colorbox on 'esc' key press.  
arrowKey     true     If false, will disable the left and right arrow keys from navigating between the items in a group.  
loop     true     If false, will disable the ability to loop back to the beginning of the group when on the last element.  
data     false     For submitting GET or POST values through an ajax request.  The data property will act exactly like jQuery's .load() data argument, as Colorbox uses .load() for ajax handling.  
className     false     Adds a given class to colorbox and the overlay.  
fadeOut     300     Sets the fadeOut speed, in milliseconds, when closing Colorbox.  
closeButton     true     Set to false to remove the close button.  
Internationalization    
current     "image {current} of {total}"     Text or HTML for the group counter while viewing a group.  {current} and {total} are detected and replaced with actual numbers while Colorbox runs.  
previous     "previous"     Text or HTML for the previous button while viewing a group.  
next     "next"     Text or HTML for the next button while viewing a group.  
close     "close"     Text or HTML for the close button.  The 'esc' key will also close Colorbox.  
xhrError     "This content failed to load."     Error message given when ajax content for a given URL cannot be loaded.  
imgError     "This image failed to load."     Error message given when a link to an image fails to load.  
Content Type    
iframe     false     If true, specifies that content should be displayed in an iFrame.  
inline     false    

If true, content from the current document can be displayed by passing the href property a jQuery selector, or jQuery object.

// Using a selector:
$("#inline").colorbox({inline:true, href:"#myForm"}); // Using a jQuery object:
var $form = $("#myForm");
$("#inline").colorbox({inline:true, href:$form});
html     false     For displaying a string of HTML or text: $.colorbox({html:"<p>Hello</p>"});  
photo     false     If true, this setting forces Colorbox to display a link as a photo.  Use this when automatic photo detection fails (such as using a url like 'photo.php' instead of 'photo.jpg')  
ajax     This property isn't actually used as Colorbox assumes all hrefs should be treated as either ajax or photos, unless one of the other content types were specified.  
Dimensions    
width     false     Set a fixed total width. This includes borders and buttons. Example: "100%", "500px", or 500  
height     false     Set a fixed total height. This includes borders and buttons. Example: "100%", "500px", or 500  
innerWidth     false     This is an alternative to 'width' used to set a fixed inner width. This excludes borders and buttons. Example: "50%", "500px", or 500  
innerHeight     false     This is an alternative to 'height' used to set a fixed inner height. This excludes borders and buttons. Example: "50%", "500px", or 500  
initialWidth     300     Set the initial width, prior to any content being loaded.  
initialHeight     100     Set the initial height, prior to any content being loaded.  
maxWidth     false     Set a maximum width for loaded content. Example: "100%", 500, "500px"  
maxHeight     false     Set a maximum height for loaded content. Example: "100%", 500, "500px"  
Slideshow    
slideshow     false     If true, adds an automatic slideshow to a content group / gallery.  
slideshowSpeed     2500     Sets the speed of the slideshow, in milliseconds.  
slideshowAuto     true     If true, the slideshow will automatically start to play.  
slideshowStart     "start slideshow"     Text for the slideshow start button.  
slideshowStop     "stop slideshow"     Text for the slideshow stop button  
Positioning    
fixed     false     If true, Colorbox will be displayed in a fixed position within the visitor's viewport.  This is unlike the default absolute positioning relative to the document.  
top     false     Accepts a pixel or percent value (50, "50px", "10%").  Controls Colorbox's vertical positioning instead of using the default position of being centered in the viewport.  
bottom     false     Accepts a pixel or percent value (50, "50px", "10%").  Controls Colorbox's vertical positioning instead of using the default position of being centered in the viewport.  
left     false     Accepts a pixel or percent value (50, "50px", "10%").  Controls Colorbox's horizontal positioning instead of using the default position of being centered in the viewport.  
right     false     Accepts a pixel or percent value (50, "50px", "10%").  Controls Colorbox's horizontal positioning instead of using the default position of being centered in the viewport.  
reposition     true     Repositions Colorbox if the window's resize event is fired.  
Retina Images    
retinaImage     false     If true, Colorbox will scale down the current photo to match the screen's pixel ratio  
retinaUrl     false     If true and the device has a high resolution display, Colorbox will replace the current photo's file extention with the retinaSuffix+extension  
retinaSuffix     "@2x.$1"     If retinaUrl is true and the device has a high resolution display, the href value will have it's extention extended with this suffix.  For example, the default value would change my-photo.jpg to my-photo@2x.jpg  
Callbacks    
onOpen     false     Callback that fires right before Colorbox begins to open.  
onLoad     false     Callback that fires right before attempting to load the target content.  
onComplete     false     Callback that fires right after loaded content is displayed.  
onCleanup     false     Callback that fires at the start of the close process.  
onClosed     false     Callback that fires once Colorbox is closed.

Public Methods

$.colorbox()     This method allows you to call Colorbox without having to assign it to an element.  $.colorbox({href:"login.php"});  
$.colorbox.next()
$.colorbox.prev()    
These methods moves to the next and previous items in a group and are the same as pressing the 'next' or 'previous' buttons.  
$.colorbox.close()     This method initiates the close sequence, which does not immediately complete.  The lightbox will be completely closed only when the cbox_closed event / onClosed callback is fired.  
$.colorbox.element()     This method is used to fetch the current HTML element that Colorbox is associated with.  Returns a jQuery object containing the element. var $element = $.colorbox.element();  
$.colorbox.resize()     This allows Colorbox to be resized based on it's own auto-calculations, or to a specific size.    This must be called manually after Colorbox's content has loaded.    The optional parameters object can accept width or innerWidth and height or innerHeight.    Without specifying a width or height, Colorbox will attempt to recalculate the height of it's current content.  
$.colorbox.remove()     Removes all traces of Colorbox from the document.  Not the same as $.colorbox.close(), which tucks colorbox away for future use.

Event Hooks

These event hooks fire at the same time as their corresponding callbacks (ie. cbox_complete & onComplete), but can be used to make a universal change to Colorbox, while callbacks are only applied to selected elements.

// Example of using an event listener and public method to build a primitive slideshow:
$(document).bind('cbox_complete', function(){
setTimeout($.colorbox.next, 1500);
});
cbox_open     triggers when Colorbox is first opened, but after a few key variable assignments take place.  
cbox_load     triggers at the start of the phase where content type is determined and loaded.  
cbox_complete     triggers when the transition has completed and the newly loaded content has been revealed.  
cbox_cleanup     triggers as the close method begins.  
cbox_closed     triggers as the close method ends.

Hey,

Follow me on Twitter and Github, that's where I'm most active these days.  I welcome email (), but I'm afraid I no longer have time to answer personal requests for help regarding my plugins or posts.  Thanks!

实例:

$.colorbox({
            initialHeight: '0',
            initialWidth: '0',
            href: "#import_data",
            overlayClose: false,
            inline: true,
            showLoading: true,
            opacity: '0.3',
            onComplete: function () {
                $("#btnSaveImport").bind("click", function () {
                    $("#UploadControl").hide();
                    $("#ImportFooter").hide();
                    $("#Download").hide();
                    $("#UploadLoading").show();
                    $.colorbox.resize();
                    ctrlUpload.startUpload();
                    $("#btnSaveImport").unbind("click");
                });
            }
        });

介绍

colorbox()函数使用一堆key/value对象和一个可选的callback函数

格式:$('selector').colorbox({key:value}, callback);

例子: $('a.gallery').colorbox({transition:'fade', speed:500});

还是例子:$('button').colorbox({href:"thankyou.html"});

设置的值

默认值

介绍

transition

"elastic"

过渡效果,可以是"elastic", "fade", or "none".

speed

350

设置过渡效果的持续时间,毫秒

href false

Example:$('h1').colorbox({href:"welcome.html"})

这个用来设置一个锚标记的值或者一个不是锚的元素,例如图像或者表单的按钮,例如:

title false

这可以为Colorbox设置一个标题

rel false

Example:$('#example a').colorbox({rel:'group1'})

这个可以根据元素的rel属性设置要显示的元素集合,也可以覆盖一个存在的rel属性

width false

Example: "100%", "500px", or 500

设置宽度,包括边框和按钮

height false

Example: "100%", "500px", or 500

设置高度,包括边框和按钮

innerWidth false

Example: "50%", "500px", or 500

这个可以设定一个固定的内大小,包括边框和按钮

innerHeight false

Example: "50%", "500px", or 500

这个可以设定一个固定的内高度,包括边框和按钮

initialWidth 300

设置初始化宽度

initialHeight 100

设置初始化高度

maxWidth false

Example: "100%", 500, "500px"

设置内容的最大宽度

maxHeight false

Example: "100%", 500, "500px"

设置内容的最大高度

scalePhotos true

如果是true且maxWidth, maxHeight, innerWidth, innerHeight, width, 或者 height 被设置,

Colorbox会缩放图片以使用边框

scrolling true

如果是false,Colorbox不会为了溢出元素设置滚动条

iframe false

如果是true,元素会在Iframe中显示

inline false

Example: $("#inline").colorbox({inline:true, href:"#myForm"});

如果是true,jQuery选择器可以用来选择要显示的元素。例如:

html false

Example:
$.fn.colorbox({html:'

Hello

'});

这个是直接让你显示HTML代码,例

photo false

如果为true,ColorBox只会把元素按照图片显示,防止类似photo.php?pic=1这样的连接被误认为是网页

opacity 0.85

遮罩层不透明度 从0-1之间取值

open false

如果为true,ColorBox会自动开启

preloading true

如果为True,ColorBox会自动预载要显示图片

overlayClose true

为true单击遮罩层就可以把ColorBox关闭

slideshow false

为True,会自动滚动图片

slideshowSpeed 2500

设置时间,毫秒

slideshowAuto true

为tuue,滑动会自动开始

slideshowStart "start slideshow"

开始自动滑动按钮的文本

slideshowStop "stop slideshow"

停止自动滑动按钮的文本

current "{current} of {total}"

文本内容:现在正在显示的元素序号

previous "previous"

“上一个”按钮的文本

next "next"

“下一个”按钮的文本

close "close"

“关闭”按钮的文本

经典弹出层Colorbox - a jQuery lightbox的更多相关文章

  1. Layer组件多个iframe弹出层打开与关闭及参数传递

    一.Layer简介 Layer是一款近年来备受青睐的web弹层组件,基于jquery,易用.实用,兼容包括IE6在内的所有主流浏览器,拥有丰富强大的可自定义的功能. Layer官网地址:http:// ...

  2. jQuery Colorbox是一款弹出层

    jQuery Colorbox使用教程 jQuery Colorbox是一款弹出层,内容播放插件,效果极佳,最关键的是大小只有10KB,当然我主要是用来弹出图片啦,(之前介绍过jquery Fancy ...

  3. 网站开发常用jQuery插件总结(二)弹出层插件Lightbox

    网站开发过程中,为了增加网站交互效果,我们有时需要在当前页面弹出诸如登陆.注册.设置等窗口.而这些窗口就是层,弹出的窗口就是弹出层.jQuery中弹出层插件很多,但有些在html5+css3浏览器下, ...

  4. Jquery 点击图片在弹出层显示大图

    http://blog.csdn.net/wongwaidah/article/details/28432427(案例链接出处,本人只是转载收藏) <html> <head> ...

  5. jquery制作弹出层带遮罩效果,点击阴影部分层消失

    jquery制作弹出层带遮罩效果,点击阴影部分层消失. 整体还是比较简单的. HTML代码很简单 <a href="#" class="big-link" ...

  6. jQuery弹出层插件popbox

    都什么年代了,还自己写弹出层插件!是的,①自己写的自己好控制②可定制性高③兼容低版本IE 本插件有以下特性: 样式分离,可定制,纯净无图片 可自定义按钮及按钮的样式.点击事件 可指定选择器选择页面元素 ...

  7. [转]jquery Fancybox丰富的弹出层效果

    本文转自:http://www.helloweba.com/view-blog-65.html Fancybox是一款优秀的jquery插件,它能够展示丰富的弹出层效果.前面我们有文章介绍了facyb ...

  8. jQuery弹出层始终垂直居中相对于屏幕或当前窗口

    把弹出层的位置设为fixed,设置top:50%,然后获取当前元素的整体的高度height,用获取的高度height/2,设置margin-top:-height/2.即可把当前的弹出层始终垂直居中于 ...

  9. jquery 简单弹出层

    预定义html代码:没有 所有代码通过js生成和移除. 预定义css .z-popup-overlay{ width:100%; min-height: 100%; height:800px; pos ...

随机推荐

  1. jdk阅读xml文件

    前言 你需要阅读的时间来写一个通用组件xml文件,但考虑到组件分布更容易,这样一来在第三方小引用jar包.因此,直接jdk内建的xml分析方法.可能都没有第三发的组件强大. 导入的文件: import ...

  2. 华为上机题汇总----java

        以下华为上机题目都是网上整理得到的,代码都是自己调试过的,由于网上java答案较少,欢迎大家批评指正,也希望对准备华为上机的童鞋们有一点点帮助.在练习的过程中成长,加油!~~  第1题:输入字 ...

  3. c#获取页面重定向url

    /// <summary> /// 获取页面重定向url /// </summary> /// <param name="url"></p ...

  4. UI设计学习路径(一个)—好酒也怕巷子深

    来源 參与米老师对项目的验收的时候.听了老师对UI的看法才注意UI这块内容.非常奇怪为什么我们总是不能注意到本该注意的问题呢?软件开发难道仅仅是功能的实现不包含界面设计吗?当然不是.问题的根源在于我们 ...

  5. POJ 1984 Navigation Nightmare (数据结构-并检查集合)

    Navigation Nightmare Time Limit: 2000MS   Memory Limit: 30000K Total Submissions: 4072   Accepted: 1 ...

  6. Windows创建的基本含义和进程的进程的内核

    过程 1 这意味着过程: 1.1   一个是在操作系统的内核对象管理处理. 的统计信息的地方. 1.2   还有一个是地址空间.它包括全部可运行模块或DL L 模块的代码和数据.它还包括动态内存分配的 ...

  7. 90社交网络的行为报告后:不拒绝陌生人,TFBOYS作为一个喜爱

    依据腾讯QQ与易观合作的<2014中国90后青年调查报告>,盘点了90后使用社交网络的行为习惯. 相比于70.80后.90后更愿意在社交媒体上公布自己照片.状态,且更愿意在即时通讯中加陌生 ...

  8. iOS 要定义自己的导航栏button样式Button Image 执行出彩是不一样的与原来的颜色 -解

    在相机闪光灯,在导航栏中自己定义"闪"样式.点击变换的图像期望,但一直没有变化.原来是该条款的Global Tint颜色.因此,系统会自己主动改变图片的颜色Global Tint颜 ...

  9. Unity 3D使用GameObject创建一个简单的可移动物体

    于Unity 3D游戏的开发.游戏脚本需要3D模拟组合,该脚本将被写入阻力3D为了达到效果对象. 以下是一个小实例,使用Unity 3D实现一个可控制移动的小人.小人能够向前.向后.向左和向右移动. ...

  10. System.ComponentModel.BackgroundWorker在WinForm中的异步使用

    为了防止操作过程中界面卡死,和WinForm搭配最适合的就是BackgroundWorker了.BackgroundWorker 类 using System; using System.Compon ...