jQuery轻量级Lightbox插件-Colorbox
ColorBox是一款功能强大的轻量级Jquery Lightbox插件。ColorBox支持图片展示、图片分组、幻灯片、行内样式和iframe内容。该lightbox插件的兼容性极好，可以兼容IE7+的IE浏览器。它的特点有：
- 支持图片展示、图片分组、幻灯片、行内样式和iframe内容。
- 轻量级：没压缩版本有10k大小，压缩版本仅5kb。
- 通过CSS控制lightbox的外观，十分容易定制。
- 可扩展的回调和事件。
- 提供众多参数控制。
- 可预加载图片组中的图片。
使用方法
使用ColorBox需要引入jQuery和jquery.colorbox.js文件以及colorbox.css文件。
<link rel="stylesheet" href="colorbox.css" /> <script src="jquery/2.1.4/jquery.min.js"></script><script src="dist/jquery.colorbox.js"></script> |
初始化插件
Colorbox可以接受键值对形式的参数对象。
// 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>';}}); |
配置参数
| 参数 | 默认值 | 描述 |
| transition | "elastic" | 过渡动画类型。可设置为"elastic", "fade", "none" |
| speed | 350 | 过渡动画的速度。单位毫秒 |
| href | false | 该参数用于替换锚链接，或一个无URL连接的元素，如图片，或表单按钮$("h1").colorbox({href:"welcome.html"}); |
| rel | false | 这个参数可以作为一个锚REL的替代方式。它允许用户将任何元素组合为一个组，制作图片画廊 |
| scalePhotos | true | 如果为true并且定义了maxWidth、maxHeight、innerWidth、innerHeight、width或height 属性，Colorbox将缩放图片以适应这些值 |
| scrolling | true | 如果为false，Colorbox 将隐藏滚动条 |
| opacity | 0.85 | 遮罩层的透明度。值从0-1 |
| open | false | 如果为true，Colorbox会立刻打开 |
| returnFocus | true | 如果为true，当Colorbox存在元素的时候会被聚焦 |
| trapFocus | true | 如果为true，Colorbox的键盘控制导航和内容将被限制 |
| fastIframe | true | 如果为false，加载的图片会被移除，onComplete事件会被延迟直到iframe的内容加载完毕 |
| preloading | true | 运行在组中预加载前一幅和下一幅图片 |
| overlayClose | true | 如果为false，禁止点击遮罩层关闭Colorbox |
| escKey | true | 如果为false，将禁止使用“ESC”键关闭Colorbox |
| arrowKey | true | 如果为false，将禁止在组中使用前后导航箭头按钮 |
| loop | true | 如果为false，图片组将不会循环 |
| data | false | 通过ajax请求提交的GET或POST的值 |
| className | false | 为colorbox 和遮罩层添加一个给定的class名称 |
| fadeOut | 300 | 设置关闭Colorbox时fadeOut效果的速度，单位毫秒 |
| closeButton | true | Colorbox的关闭按钮 |
国际化参数设置
| 参数 | 默认值 | 描述 |
| current | "image {current} of {total}" | 图片组中图片数量。{current} 和 {total}在运行时会被替换 |
| previous | "previous" | 前一张图片按钮的显示文字 |
| next | "next" | 下一张图片按钮的显示文字 |
| close | "close" | 关闭按钮上的显示文字。“ESC”键也可以关闭Colorbox |
| xhrError | "This content failed to load." | 指定的ajax调用的内容没有被正确加载时显示的文字 |
| imgError | "This image failed to load." | 图片内容没有被加载时显示的文字 |
内容类型
| 参数 | 默认值 | 描述 |
| iframe | false | 如果为true，指定的内容会被显示在iFrame中 |
| inline | false | 如果为true，当前文档的内容可以通过传入一个带jQuery选择器的href作为参数来显示内容 |
| html | false | 显示一个HTML的字符串$.colorbox({html:"
Hello "}); |
| photo | false | 如果为true，会强制Colorbox将一个链接显示为图片 |
| 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. |
