ColorBox 基于 jQuery 的弹出层图片内容展示插件

发布于 2020-09-05 21:01:49 字数 3083 浏览 1406 评论 0

ColorBox 是一个基于 jQuery 的轻量级,自定义灯箱插件,功能非常强大,支持图片,图片组,ajax,inline 和 iframed 内容,灯箱样式完全由用户控制,可自定义CSS样式,不需要改写 ColorBox 库文件就能重写展示效果设置,支持加载预处理提示等等。

使用说明

1、引入 jquery 核心库和 ColorBox 脚本文件

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script> 
<script src="../colorbox/jquery.colorbox.js"></script>

2、引入 ColorBox 样式表文件,注意引入不同皮肤的 CSS 文件将实现不同的皮肤

<link media="screen" rel="stylesheet" href="colorbox.css" />

3、编写 HTML 代码

<a href="../content/ohoopee1.jpg"rel="example1" title="Me and my">GroupedPhoto1</a>

4、初始化插件

$(document).ready(function() {
  //Examples of how to assign the Colorbox event to elements
  $(".group1").colorbox({
    rel: 'group1'
  });
});

还可以使用下面的方式调用:

// 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" or "fade"
transitionSpeed350表示灯箱过渡效果展示的速度
initialWidth300表示灯箱初始化宽度
initialHeight100表示灯箱初始化高度
contentWidthfalse表示是否设置一个固定的宽度
contentHeightfalse表示是否设置一个固定的高度
contentAjaxfalse表示是否是一个ajax加载
contentInlinefalse表示是否是一个inline
contentIframefalse表示是否是一个iframe
bgOpacity0.85表示灯箱的背景透明度
preloadingtrue表示是否预加载
contentCurrent'{current} of {total}'表示灯箱展示的当前图片和总数
contentPrevious'previous'表示上一个锚,类似于rel属性
contentNext'next'表示下一个锚,类似于rel属性
modalClose'close'锚文本关闭链接,可选Esc或close

项目主页:http://www.jacklmoore.com/colorbox/

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

0 文章
0 评论
84960 人气
更多

推荐作者

漫雪独思

文章 0 评论 0

垂暮老矣

文章 0 评论 0

鹊巢

文章 0 评论 0

萌酱

文章 0 评论 0

雨说

文章 0 评论 0

冰葑

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文