jQuery Colorbox是一款弹出层,内容播放插件,效果极佳,当然我主要是用来弹出图片啦。
jQuery Colorbox不仅有弹性动画效果,淡入淡出效果,幻灯片播放,宽度自定义,还能够ajax加载html,iframe等等,最主要的是它还可以写回调函数
效果演示地址:
1、http://www.phpddt.com/demo/colorbox/example1/
2、http://www.phpddt.com/demo/colorbox/example2/
3、http://www.phpddt.com/demo/colorbox/example3/
4、http://www.phpddt.com/demo/colorbox/example4/
5、http://www.phpddt.com/demo/colorbox/example5/
下载地址: https://github.com/jackmoore/colorbox
文档地址:http://www.jacklmoore.com/colorbox/
一些使用的例子:
$('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>'; }});
关闭colorbox事件:
写法一: window.parent.$.fn.colorbox.close();
写法二: parent.$.colorbox.close();
或者通过刷新父页面关闭: window.parent.location.reload();
jquery colorbox设置翻译:
属性 | 默认值 | 描述 |
transition | "elastic" | 过渡型。可以设置为“弹性”,“消失”,或“无”。 |
speed | 350 | 套的褪色和弹性转换速度,以毫秒为单位。 |
href | false | 这可以被用来作为一种替代锚URL或联想到的URL非锚的元素,如图片或表格按钮。$(“H1”.colorbox(的HREF){ }”的民族性与地域性:”); |
title | false | 这可以作为一个锚定的方式-。 |
rel | false | 这可以作为一个锚REL的替代方式。这允许用户在一个画廊集团任何元素的组合,或改变现有的关系所以元素不归。$(“a.gallery”.colorbox(REL):“group1”{ });注:值也可以设置为“nofollow”禁用分组。 |
scalePhotos | true | 如果是真的,如果最大,最大高度,innerwidth,innerheight,宽度或高度已经确定,ColorBox会规模的照片符合这些价值观。 |
scrolling | true | 如果为false,ColorBox将隐藏溢出内容滚动条。这可以用于与调整相结合的方法(见下文)为一个平稳的过渡,如果你添加内容到方式已经打开的一个实例。 |
opacity | 0.85 | 叠加的不透明度。范围:0到1。 |
open | false | 如果属实,将立即打开方式。 |
returnFocus | true | 如果属实,将回来时的方式出口到元是从。 |
trapFocus | true | 如果是真的,键盘焦点将限于ColorBox的导航和内容。 |
fastIframe | true | 如果为false,加载图形去除和oncomplete事件将推迟到iframe的内容已经完全加载。 |
preloading | true | 允许预压下”、“前”的内容在一个组,在目前的内容加载完毕。设置为false禁用。 |
overlayClose | true | 如果为false,禁用关闭的方式通过点击背景叠加。 |
escKey | true | 如果为假,将禁用“ESC”键关闭方式。 |
arrowKey | true | 如果为假,将禁用左、右方向键从组中的项目之间导航。 |
loop | true | 如果为假,将禁用环回组开始时的最后一个元素的能力。 |
data | false | 提交GET或POST值通过一个Ajax请求。数据属性会完全像jQuery的。()数据参数,如使用AJAX处理()的方式。 |
className | false | 增加一个给定的类的方式和覆盖。 |
fadeOut | 300 | 毫秒淡出速度,集,当关闭方式。 |
closeButton | true | 设置为false将关闭按钮。 |
Internationalization | ||
current | "image {current} of {total}" | 文本或HTML的组计数器在观看一组。{ }和{ }当前总的检测和实际的数字方式运行时更换。 |
previous | "previous" | 文本或HTML以前在观看一组按钮。 |
next | "next" | 文本或HTML的下一个按钮在观看一组。 |
close | "close" | 文本或HTML for the Close按钮。the ESC关闭colorbox也将是关键。 |
xhrError | "This content failed to load." | 错误消息时,Ajax的内容对于一个给定的URL不能加载。 |
imgError | "This image failed to load." | 错误消息时给出一个链接到一个图像加载失败。 |
Content Type | ||
iframe | false | 如果是真的,指定的内容应在iframe中显示。 |
inline | false | 如果是真的,从当前文档的内容可以通过href属性jQuery选择器显示jQuery对象,或。 使用A /选择器:$(“#内联”.colorbox(){内嵌链接:威胁:“# myform”}); // Using a jQuery object:var $form = $("#myForm");$("#inline").colorbox({inline:true, href:$form}); |
html | false | 显示一个字符串的HTML或文本:$.colorbox({html:"<p>Hello</p>"}); |
photo | false | 如果是真的,这个设置军队的方式来显示链接的照片。用这个当照片自动检测失败(如使用URL的照片。PHP '而不是'照片.jpg”) |
ajax | 这个属性实际上不作为的方式承担所有的所有应被视为Ajax或照片,除非另一个指定的内容类型。 | |
Dimensions | ||
width | false | 设定一个固定的总宽度。这包括边框和按钮。例如:“100%”、“500px”,或500 |
height | false | 设定一个固定的总高度。这包括边框和按钮。例如:“100%”、“500px”,或500 |
innerWidth | false | 这是一个替代“宽度”用来设置一个固定的内部宽度。这不包括边框和按钮。例如:“50%”、“500px”,或500 |
innerHeight | false | 这是另一种“高度”用来设置一个固定的内部高度。这不包括边框和按钮。例如:“50%”、“500px”,或500 |
initialWidth | 300 | 设置初始宽度,正在加载任何内容之前。 |
initialHeight | 100 | 设置初始高度,正在加载任何内容之前。 |
maxWidth | false | 设置内容的最大宽度。例如:“100%”,500,“500px” |
maxHeight | false | 设置内容的最大高度。例如:“100%”,500,“500px” |
Slideshow | ||
slideshow | false | 如果是真的,增加了一个自动的幻灯片内容组/画廊。 |
slideshowSpeed | 2500 | 设置幻灯片的速度,以毫秒为单位。 |
slideshowAuto | true | 如果是真的,幻灯片将自动开始播放。 |
slideshowStart | "start slideshow" | 为幻灯片开始按钮文字。 |
slideshowStop | "stop slideshow" | 停止自动滑动按钮的文本 |
Positioning | ||
fixed | false | 如果是真的,颜色框将显示在一个固定的位置,在游客的视口。这是不同于默认的绝对定位相对于文档。 |
top | false | 接受一个像素或百分比值(50,“50px”、“10%”)。而不是使用被集中在视口的默认位置控制方式的垂直定位。 |
bottom | false | 接受一个像素或百分比值(50,“50px”、“10%”)。而不是使用被集中在视口的默认位置控制方式的垂直定位。 |
left | false | 接受一个像素或百分比值(50,“50px”、“10%”)。控制方式的水平定位而不是使用被集中在视口的默认位置。 |
right | false | 接受一个像素或百分比值(50,“50px”、“10%”)。控制方式的水平定位而不是使用被集中在视口的默认位置。 |
reposition | true | 复位方式如果窗口的Resize事件触发。 |
Retina Images | ||
retinaImage | false | 如果是真的,方式将减少与屏幕的像素比目前的照片 |
retinaUrl | false | 如果是真的,该设备具有高分辨率显示器,ColorBox会与retinasuffix扩展替换当前照片的文件扩展名 |
retinaSuffix | "@2x.$1" | 如果retinaurl真实设备具有高分辨率显示器,href值将其延伸扩展这个后缀。例如,默认值会改变`相片,JPG `到` my-photo@2x.jpg ` |
Callbacks | ||
onOpen | false | 回调,火灾对ColorBox开始打开之前。 |
onLoad | false | 回调,火灾就在试图加载的目标内容。 |
onComplete | false | 回调后加载内容显示火灾。 |
onCleanup | false | 回调,在关闭过程的生火。 |
onClosed | false | 回调,火灾一旦ColorBox关闭。 |
公共方法
$.colorbox() | 这种方法允许您调用的方式而无需将它分配给一个元素。.colorbox美元(的HREF:“login.php”{ }); |
$.colorbox.next() | 这些方法移动到下一个和上一组的项目,按“下一步”或“前进”按钮相同。 |
$.colorbox.close() | 此方法启动关闭序列,不立即完成。灯箱将完全关闭,只有当cbox_closed事件/亲密的回调是解雇 |
$.colorbox.element() | 此方法用于获取方式是与当前的HTML元素。返回一个包含元素的jQuery对象。var $element = $.colorbox.element(); |
$.colorbox.resize() | 这允许的方式来调整基于自己的自动计算,或为特定的大小。这一定是Colorbox之后的内容有手动加载称为。可选的参数对象可以接受宽度或innerwidth和高度或innerheight。没有指定宽度或高度,ColorBox会尝试重新计算其当前内容的高度。 |
$.colorbox.remove() | 删除所有痕迹的方式从文件。不一样的方式(),其中美元。把颜色框起来供以后使用。 |
事件:
cbox_open |
| 当Colorbox第一次打开触发器,但在几个关键变量的赋值发生。 |
cbox_load |
| 触发器在开始的阶段,内容类型确定装。 |
cbox_complete |
| 触发时,过渡已经完成,新加载的内容已被发现。 |
cbox_cleanup |
| 触发器为关闭方法开始。 |
cbox_closed |
| 触发器为近端的方法 |