ColorBox 基于 jQuery 的弹出层图片内容展示插件
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" |
transitionSpeed | 350 | 表示灯箱过渡效果展示的速度 |
initialWidth | 300 | 表示灯箱初始化宽度 |
initialHeight | 100 | 表示灯箱初始化高度 |
contentWidth | false | 表示是否设置一个固定的宽度 |
contentHeight | false | 表示是否设置一个固定的高度 |
contentAjax | false | 表示是否是一个ajax加载 |
contentInline | false | 表示是否是一个inline |
contentIframe | false | 表示是否是一个iframe |
bgOpacity | 0.85 | 表示灯箱的背景透明度 |
preloading | true | 表示是否预加载 |
contentCurrent | '{current} of {total}' | 表示灯箱展示的当前图片和总数 |
contentPrevious | 'previous' | 表示上一个锚,类似于rel属性 |
contentNext | 'next' | 表示下一个锚,类似于rel属性 |
modalClose | 'close' | 锚文本关闭链接,可选Esc或close |
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论