当前位置：首页 > 网页特效 > Lightbox和对话框

Colorbox 强大的jQuery轻量级Lightbox插件

分类：Lightbox和对话框日期：2024-05-14 点击(1) 评论(0)

简介

##### 使用方法
使用ColorBox需要引入jQuery和jquery.colorbox.js文件以及colorbox.css文件。

```html
<link rel="stylesheet" href="colorbox.css" />             
<script src="jquery/2.1.4/jquery.min.js"></script>
<script src="dist/jquery.colorbox.js"></script>   
```       
#####  初始化插件
Colorbox可以接受键值对形式的参数对象。

```html
// 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.|

web299.com

Colorbox 强大的jQuery轻量级Lightbox插件

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果