jQuery Colorbox弹窗插件使用教程小结、属性设置详解

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.prev()	这些方法移动到下一个和上一组的项目，按“下一步”或“前进”按钮相同。
$.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		触发器为近端的方法

巴特西

jQuery Colorbox弹窗插件使用教程小结、属性设置详解

最新文章

热门文章