Colorbox的官方介绍和colorbox的常见问题中文翻译

来自：http://blog.goodtext.org/items/b10.html

Colorbox
Jquery的一个轻量的，可自定义的 lightbox 插件。
Colorbox的官方介绍和colorbox的常见问题中文翻译

Colorbox

Jquery的一个轻量的，可自定义的 lightbox 插件。

为什么选择Colorbox?

• Supports photos, photo groups, slideshow, ajax, inline, and iframed content.
• 支持图片，图片组，图片滑动观看，ajax,行内元素和iframe内容
• Lightweight: less than 9KB of JavaScript.
• 十分轻量，只有不到9KB大小
• Appearance is controlled through CSS so users can restyle the box.
• 外观可以通过CSS进行控制
• Behavior settings can be over-written without altering the ColorBox javascript file.
• 可以直接覆盖ColorBox的行为设置而不用改ColorBox的JS文件
• 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.
• 非入侵式操作，选项可以在JS中设置而不用更改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.
• 用Jquery插件格式编写，可以使用链式操作
• Generates W3C valid XHTML and adds no JS global variables & passes JSLint.
• 语法通过W3C和XHTML认证，没有添加JS的全局变量
• Released under the MIT License.
• 在 MIT License下发布

Tested In: Firefox 2 & 3, Safari 3 & 4, Opera 9, Chrome, Internet Explorer 6, 7, 8.在Firefox 2 & 3, Safari 3 & 4, Opera 9, Chrome, Internet Explorer 6, 7, 8.下运行良好

Instructions 

介绍

The colorbox() function takes a key/value object and an optional callback.

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

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

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

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

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

Example: $('button').colorbox({href:"thankyou.html"});

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

Follow the source code on the demonstration pages for plenty of examples.

在Colorbox的演示页面还有很多例子

Key 

设置的值

Default 

默认值

Description 

描述

transition

过渡

"elastic"

The transition type. Can be set to "elastic", "fade", or "none".

过渡效果，可以是"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. Example:
$('h1').colorbox({href:"welcome.html"})

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

title
false

This can be used as an anchor title alternative for ColorBox.

这可以为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. Example:
$('#example a').colorbox({rel:'group1'})

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

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.

如果是true且maxWidth, maxHeight, innerWidth, innerHeight, width, 或者 height 被设置，Colorbox会缩放图片以使用边框

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.

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

iframe
false

If 'true' specifies that content should be displayed in an iFrame.

如果是true，元素会在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"});

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

html
false

This allows an HTML string to be used directly instead of pulling content from another source (ajax, inline, or iframe). Example:
$.fn.colorbox({html:'<p>Hello</p>'});

这个是直接让你显示HTML代码，例如：

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

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

opacity
0.85

The overlay opacity level. Range: 0 to 1.

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

open
false

If true, the lightbox will automatically open with no input from the visitor.

如果为true,ColorBox会自动开启

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.

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

overlayClose
true

If true, enables closing ColorBox by clicking on the background overlay.

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

slideshow
false

If true, adds an automatic slideshow to a content group / gallery.

为True，会自动滚动图片

slideshowSpeed
2500

Sets the speed of the slideshow, in milliseconds.

设置时间，毫秒

slideshowAuto
true

If true, the slideshow will automatically start to play.

为tuue，滑动会自动开始

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.

文本内容：现在正在显示的元素序号，格式"{现在} of {总计}"

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.

下面几个都是在XXX时候要执行的函数，不用多说，一看就会

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.

1,flash覆盖colorbox:

This is not a ColorBox specific problem, by default Flash will overlay any HTML content. This can be prevented by setting the ‘wmode’ param and embed attribute to ‘transparent’.
这不是colorbox本身的问题，flash默认会覆盖所有的HTML内容，你可以设置wmode参数为transparent来避免这个问题。

2,colorbox在ie中的位置和行为异常:

这有可能是doctype（DTD）问题。colorbox需要有个有效的DTD声明，否则浏览器会以怪异模式（quirks mode,在标准模式中，浏览器根据W3C所定的规范来显示页面；而在怪异模式中，页面将以IE5，甚至IE4的显示页面的方式来表现，以保持以前的网 页能正常显示）呈现网页内容。务必使用正确的DTD声明来确保浏览器以标准模式呈现网页。
下面这段声明会将IE浏览器设定成怪异模式

Html代码

1. <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN”>

这段带有URI的声明可以将所有浏览器设定到标准模式

Html代码

1. <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd“>

3,colorbox的位置和行为异常（不区分浏览器）:

这可能是源文件引用顺序错误导致的。JQuery和colorbox.css必须在jquery.colorbox.js之前引入，并且应该在JQuery的ready方法中调用colorbox，并且此调用要在引入jquery.colorbox.js之后

4,用colorbox显示外部文档时显示不正确:

这是由于没有将iframe参数设为true。默认的方式只能正确显示可以在body标签中存在的内容。

如果你想显示一个完整的html文档（包括<html>、<head>和<body>等标签），那么要是用iframe参数。并且要设定高度和宽度，因为colorbox无法得知位于iframe内的网页内容的宽高。

另外，如果你想载入一段位于相同域名下的另一个文档的部分内容，可以使用下面的方法

Js代码

$(‘#example’).colorbox({href:”document.html div#content”}); 

5,在ie中colorbox的边框不显示:

colorbox中提供的例子中有些使用了png图片的透明度效果。IE6不支持alpha透明度，并且在IE7和IE8中也会出现黑底的效果。colorbox使用IE的css滤镜解决了这个问题，你可以再colorbox.css文件中看到这些代码。在例子中使用了相对路径，但用户将colorbox应用到自己的网站时经常更改image文件夹相对于css的路径。滤镜的路径也需要有相应的变动。请看下面的例子，假设你的images文件夹位于根目录下。

在css文件中使用了错误的相对路径:

Html代码

1. .AlphaImageLoader(src=images/internet_explorer/borderTopLeft.png 

正确的路径:

Html代码

1. .AlphaImageLoader(src=/images/internet_explorer/borderTopLeft.png 

正确的绝对路径:

Html代码

1. .AlphaImageLoader(src=http://your_domain.com/images/internet_explorer/borderTopLeft.png 

6,尝试载入外部页面却获得”Request unsuccessful”的报错信息

这可能是因为你尝试载入一个无效的URL或者ajax的方式载入其他域名下的文件。由于浏览器的限制，ajax方式必须载入与其在同一域名下的文件。并且ajax需要有服务器支持，如果本地测试必须安装apache服务。

7,如何通过rel属性关闭colorbox的群组功能

Js代码

1. $(‘a[rel="examples"]‘).colorbox({rel:’nofollow’}); 

8,JavaScript/jQuery 在colorbox中不工作
这多数是因为在元素还没有载入到文档中时就尝试访问它，解决的方法是将这些js代码应道到colorbox的onComplete调用中。

例如： (使用 jQuery Forms 插件:

Js代码

1. $(‘#login_window’).colorbox({onComplete:function(){ 
2. $(‘form#login’).ajaxForm(); 
3. }}); 

9,在iframe外面打开colorbox

任何在iframe中打开的内容都会被限制在iframe中，除非你将colorbox放到它的上一级窗口中。你可以从iframe中返回parent窗口打开colorbox。

Js代码

1. Example: 
2. <a href=’login.php’ onclick=’parent.$.fn.colorbox({href:”login.php”}); return false;’>Open from parent</a> 

这种方法不能用于group方式，因为parent文档无法访问iframe里的内容，也就无法访问内部元素的rel属性。

colorbox 弹出窗口，但是没有内容

添加属性：transition: "elastic", 即可，理由不明。