ColorBox 演示和说明/API

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.

兼容: Firefox 2 & 3, Safari 3 & 4, Opera 9, Chrome, Internet Explorer 6, 7, 8.

使用说明

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

 

 

文章出处：http://www.yaoin.net/css/jquery/colorbox/