ColorBox 演示和说明/API: 轻量级,可定制的 lightbox 插件,适用于 jQuery 1.3和1.4
http://colorpowered.com/colorbox/
演示: 1,2,3,4,5
下载
我们要使用 ColorBox
- 支持 照片,照片组,幻灯片,ajax,内联 和 iframe 框架。Supports photos, photo groups, slideshow, ajax, inline, and iframed content.
- 轻量级,不超过9kb 的javascript 代码。Lightweight: less than 9KB of JavaScript.
- 通过CSS 控制外观,使用用户可以很容易重新定制外观。Appearance is controlled through CSS so users can restyle the box.
- 不需要更改 ColorBox 的 javascript 文件就可以重新设定其行为。Behavior settings can be over-written without altering the ColorBox javascript file.
- 可以依靠 callback & event-hooks 进行拓展,不需要修改源代码。Can be extended with callbacks & event-hooks without altering the source files.
- 非常友好,不需要修改现有的 HTML,所有的选项都通过 JS 设置。Completely unobtrusive, options are set in the JS and require no changes to existing HTML.
- 预载背景图片和图片组里的其他图片。Preloads background images and can preload upcoming images in a photo group.
- Written in jQuery plugin format and can be chained with other jQuery commands.
- Generates W3C valid XHTML and adds no JS global variables & passes JSLint.
- Released under the MIT License.
使用说明 colorbox 方法有一个 key/value 对象和一个 callback 选项。The colorbox method takes a key/value object and an optional callback.
格式: $('selector').colorbox({key:value, key:value, key:value}, callback);
示例: $('a#login').colorbox({transition:'fade', speed:500});
示例: $('a.gallery').colorbox();
示例: $('button').colorbox({href:"thankyou.html"});
直接打开,不需要把方法赋给元素。And it can be called directly, without assignment to an element
Example: $.fn.colorbox({href:"thankyou.html"});
ColorBox 可以接受自定于函数代替静态变量。ColorBox can accept a function in place of a static value:
$("a[rel='example']").colorbox({title: function(){
var url = $(this).attr('href');
return 'Open In New Window';
}});
演示页面的大量源码示例。Follow the source code on the demonstration pages for plenty of examples.
Key | Default | Description |
---|---|---|
transition | "elastic" | 过渡效果,可以设置为elastic,fade 或 none。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 | 这儿可以说锚点链接,或者像 image、button 这样非锚点元素上的链接。This can be used as an alternative anchor URL or to associate a URL for non-anchor elements such as images or form buttons. Example: $('h1').colorbox({href:"welcome.html"}) |
title | false | 锚点的title 可以用作 ColorBox 的title。This can be used as an anchor title alternative for ColorBox. |
rel | false | 在 ColorBox里这个可以看作一个锚点。用户可以靠它把任何元素组合中一起成一个相册。反之就不能组合中一起。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. Example: $('#example a').colorbox({rel:'group1'}) 注:这里也可以设置为‘nofollow’来关掉编组。 The value can also be set to 'nofollow' to disable grouping. |
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" |
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. |
iframe | false | If 'true' specifies that content should be displayed in an iFrame. |
inline | false | If 'true' a jQuery selector can be used to display content from the current page. Example: $("#inline").colorbox({inline:true, href:"#myForm"}); |
html | false | 可以使用 HTML 字符串代替牵涉的内容。This allows an HTML string to be used directly instead of pulling content from another source (ajax, inline, or iframe). Example: $.fn.colorbox({html:'Hello '}); |
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', 'photo.jpg#1', or 'photo.jpg?pic=1') |
opacity | 0.85 | 覆盖层的透明级别(0-1).The overlay opacity level. Range: 0 to 1. |
open | false | 如果是 true,lightbox 会自动打开而不需要任何动作。If true, the lightbox will automatically open with no input from the visitor. |
preloading | true | Allows for preloading of 'Next' and 'Previous' content in a shared relation group (same values for the 'rel' attribute), after the current content has finished loading. Set to 'false' to disable. |
overlayClose | true | 如果是true,点击背景覆盖层将关闭 ColorBox。If true, enables closing ColorBox by clicking on the background overlay. |
slideshow | false | 如果是true,内容组或者相册将自动添加到幻灯片。If true, adds an automatic slideshow to a content group / gallery. |
slideshowSpeed | 2500 | 设置幻灯片的速度,单位毫秒。Sets the speed of the slideshow, in milliseconds. |
slideshowAuto | true | 如果是 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 |
current | "{current} of {total}" | Text format for the content group / gallery count. {current} and {total} are detected and replaced with actual numbers while ColorBox runs. |
previous | "previous" | Text for the previous button in a shared relation group (same values for 'rel' attribute). |
next | "next" | Text for the next button in a shared relation group (same values for 'rel' attribute). |
close | "close" | Text for the close button. The 'Esc' key will also close ColorBox. |
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. |
http://groups.google.com/group/colorbox/topics
【ColorBox 演示和说明/API】文章出处:http://www.yaoin.net/css/jquery/colorbox/
推荐阅读
- JavaScript|web前端入门到实战(好用的Js图表库)
- 接口访问加密方式
- 实用技术|Chrome 技术篇-常用web调试手法(清除缓存并硬性重新加载)
- 有关easyUI的拖动操作中droppable,draggable用法例子
- web前端|CSS科技感四角边框
- SUI 列表 底部无限滚动
- js把时间戳转化为时间
- js jq获取标签的各种方式整理
- WEB前端|用HTML5canvas绘制一个圆环形的进度表示