ColorBox 基于 jQuery 的弹出层图片内容展示插件 - 文章教程

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

发布于 2020-09-05 字数 3405 浏览 1128 评论 0

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

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

使用说明

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

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

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

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

2583 文章
29 评论
84935 人气
更多

推荐作者

Jay

文章 0 评论 0

guowei007

文章 0 评论 0

2668157715

文章 0 评论 0

HY阳

文章 0 评论 0

想挽留

文章 30 评论 3