浙江 杭州

Colorbox | 强大的jQuery轻量级Lightbox插件

系统分类: 网页特效 - jquery插件 - jQuery页面滚动 2017-03-23

人气528

亲们该页面内会员们分享的“作品”,版权为才华横溢的原作者们所有滴,不得商业使用!


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并且定义了maxWidthmaxHeightinnerWidthinnerHeightwidthheight 属性,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.

关于Colorbox更加详细的参数和方法事件请参考官方网站:http://www.jacklmoore.com/colorbox/

查看演示
下载资源:0
下载资源
错误提交:

格式:zip 大小:1.03M

================关于优设记================
“优设记ui3g.com“是国内最全jquery插件下载 - 高质量网页素材的学习下载平台
资源微博:同步网站更新内容,订阅jquery资源 @吐槽优设记,欢迎关注获取网页设计资源、下载顶尖设计素材。
文章链接: http://www.ui3g.com/code/uicode-1866.html 非特殊说明,本文版权归原作者所有,转载请注明出处
Colorbox | 强大的jQuery轻量级Lightbox插件

我当前G币余额:0 已下载次数:0

注:购买该插件的用户当日可免费下载 插件作者可永久免费下载

所需G币:20

下载提示:由于文件较小,请直接点击下载,不支持迅雷等下载工具。

抱歉 G币 不足,你可以通过 上传PSD & jquery 充值 获得G币

 
标签 lightbox 

据说认真评论作品的以后都迅速成长为大神了(已有0 评论)