关于一款优秀的Jquery插件-Colorbox的官方用法翻译

原创文章，如果您需要转载，请您注明来源来自 http://hi.baidu.com/234000/ 谢谢！

Colorbox:http://colorpowered.com/colorbox/

Colorbox是一个能在你的浏览器窗口中创建一个模态对话框的程序。。。也就是类似大家经常看到的那种遮罩层+提示框的样子。当然，你也可以让遮罩层不显示的。

在 以前，用于Jquery的类似插件应该毫无疑问是Thickbox。不过前一阵子去Jquery Plugins看的时候发现Thickbox已经停止了更新，且Jquery官方推荐了几个Thickbox的替代品，我最终选择了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.

  下面几个方法由于时间问题没能来得及翻译，有空一定为大家补上

  Public Methods

  $.fn.colorbox()
  This method allows you to call ColorBox without having to assign it to an element. Returns 'this' (document). Example: $.fn.colorbox({href:'login.php', open:true});

  $.fn.colorbox.next() & $.fn.colorbox.prev()
  These methods moves to the next and previous items in a gallery and are the same as pressing the 'next' or 'previous' buttons. Returns nothing.

  $.fn.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 is fired. Returns nothing.

  $.fn.colorbox.element()
  This method is used to fetch the current HTML element that ColorBox is associated with. Returns a DOM element. Example: var that = $.fn.colorbox.element();

  $.fn.colorbox.resize()
  This allows ColorBox to auto-resize it's height if it's content is altered. This must be called manually after the content has been updated. Set 'scrollbars' to false to prevent them from being displayed during the resize animation.

  $.fn.colorbox.init()
  This runs silently when the DOM is first loaded and is used to initialize the lightbox (adds necessary HTML to the DOM, preloads the interface graphics, initializes variables, etc). If ColorBox were completely removed from the DOM, to load in a new stylesheet for example, this would be needed to re-initialize it.