经典弹出层Colorbox - a jQuery lightbox
Colorbox - a jQuery lightbox
A lightweight customizable lightbox plugin for jQuery
View Demos
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.
|
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: 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的更多相关文章
- Layer组件多个iframe弹出层打开与关闭及参数传递
一.Layer简介 Layer是一款近年来备受青睐的web弹层组件,基于jquery,易用.实用,兼容包括IE6在内的所有主流浏览器,拥有丰富强大的可自定义的功能. Layer官网地址:http:// ...
- jQuery Colorbox是一款弹出层
jQuery Colorbox使用教程 jQuery Colorbox是一款弹出层,内容播放插件,效果极佳,最关键的是大小只有10KB,当然我主要是用来弹出图片啦,(之前介绍过jquery Fancy ...
- 网站开发常用jQuery插件总结(二)弹出层插件Lightbox
网站开发过程中,为了增加网站交互效果,我们有时需要在当前页面弹出诸如登陆.注册.设置等窗口.而这些窗口就是层,弹出的窗口就是弹出层.jQuery中弹出层插件很多,但有些在html5+css3浏览器下, ...
- Jquery 点击图片在弹出层显示大图
http://blog.csdn.net/wongwaidah/article/details/28432427(案例链接出处,本人只是转载收藏) <html> <head> ...
- jquery制作弹出层带遮罩效果,点击阴影部分层消失
jquery制作弹出层带遮罩效果,点击阴影部分层消失. 整体还是比较简单的. HTML代码很简单 <a href="#" class="big-link" ...
- jQuery弹出层插件popbox
都什么年代了,还自己写弹出层插件!是的,①自己写的自己好控制②可定制性高③兼容低版本IE 本插件有以下特性: 样式分离,可定制,纯净无图片 可自定义按钮及按钮的样式.点击事件 可指定选择器选择页面元素 ...
- [转]jquery Fancybox丰富的弹出层效果
本文转自:http://www.helloweba.com/view-blog-65.html Fancybox是一款优秀的jquery插件,它能够展示丰富的弹出层效果.前面我们有文章介绍了facyb ...
- jQuery弹出层始终垂直居中相对于屏幕或当前窗口
把弹出层的位置设为fixed,设置top:50%,然后获取当前元素的整体的高度height,用获取的高度height/2,设置margin-top:-height/2.即可把当前的弹出层始终垂直居中于 ...
- jquery 简单弹出层
预定义html代码:没有 所有代码通过js生成和移除. 预定义css .z-popup-overlay{ width:100%; min-height: 100%; height:800px; pos ...
随机推荐
- jdk阅读xml文件
前言 你需要阅读的时间来写一个通用组件xml文件,但考虑到组件分布更容易,这样一来在第三方小引用jar包.因此,直接jdk内建的xml分析方法.可能都没有第三发的组件强大. 导入的文件: import ...
- 华为上机题汇总----java
以下华为上机题目都是网上整理得到的,代码都是自己调试过的,由于网上java答案较少,欢迎大家批评指正,也希望对准备华为上机的童鞋们有一点点帮助.在练习的过程中成长,加油!~~ 第1题:输入字 ...
- c#获取页面重定向url
/// <summary> /// 获取页面重定向url /// </summary> /// <param name="url"></p ...
- UI设计学习路径(一个)—好酒也怕巷子深
来源 參与米老师对项目的验收的时候.听了老师对UI的看法才注意UI这块内容.非常奇怪为什么我们总是不能注意到本该注意的问题呢?软件开发难道仅仅是功能的实现不包含界面设计吗?当然不是.问题的根源在于我们 ...
- POJ 1984 Navigation Nightmare (数据结构-并检查集合)
Navigation Nightmare Time Limit: 2000MS Memory Limit: 30000K Total Submissions: 4072 Accepted: 1 ...
- Windows创建的基本含义和进程的进程的内核
过程 1 这意味着过程: 1.1 一个是在操作系统的内核对象管理处理. 的统计信息的地方. 1.2 还有一个是地址空间.它包括全部可运行模块或DL L 模块的代码和数据.它还包括动态内存分配的 ...
- 90社交网络的行为报告后:不拒绝陌生人,TFBOYS作为一个喜爱
依据腾讯QQ与易观合作的<2014中国90后青年调查报告>,盘点了90后使用社交网络的行为习惯. 相比于70.80后.90后更愿意在社交媒体上公布自己照片.状态,且更愿意在即时通讯中加陌生 ...
- iOS 要定义自己的导航栏button样式Button Image 执行出彩是不一样的与原来的颜色 -解
在相机闪光灯,在导航栏中自己定义"闪"样式.点击变换的图像期望,但一直没有变化.原来是该条款的Global Tint颜色.因此,系统会自己主动改变图片的颜色Global Tint颜 ...
- Unity 3D使用GameObject创建一个简单的可移动物体
于Unity 3D游戏的开发.游戏脚本需要3D模拟组合,该脚本将被写入阻力3D为了达到效果对象. 以下是一个小实例,使用Unity 3D实现一个可控制移动的小人.小人能够向前.向后.向左和向右移动. ...
- System.ComponentModel.BackgroundWorker在WinForm中的异步使用
为了防止操作过程中界面卡死,和WinForm搭配最适合的就是BackgroundWorker了.BackgroundWorker 类 using System; using System.Compon ...