[代码样式]jQuery Lightbox效果插件Boxer

脚本代码
20年10月27日
编辑

简介

Boxer 是一款基于 jQuery 的 Lightbox 效果插件，可用于显示图片、视频、iframe和其他内容，和其他Lightbox 效果插件一样，Boxer 在显示组图的时候，有左右箭头控制。Boxer 还能自动检测设备是否为移动设备，针对移动设备显示更适合的样式和更友好的触摸控制。

兼容性

浏览器兼容：simpleGal 兼容所有浏览器，包括 IE6。

jQuery 版本兼容：simpleGal 兼容 1.7 以上版本。

使用方法

以下介绍最基本的用法，更多用法请查看参数或演示。

1、引入文件

<link rel="stylesheet" href="https://www.dowebok.com/css/jquery.fs.boxer.css" rel="external nofollow" >
<script src="https://www.dowebok.com/js/jquery.min.js"></script>
<script src="https://www.dowebok.com/js/jquery.fs.boxer.js"></script>

2、HTML

<a title="标题闪电闪电" href="https://www.dowebok.com/images/1b.jpg" rel="external nofollow" >
    <img src="https://www.dowebok.com/images/1s.jpg" alt="">
</a>

标签 a 的属性 title 用于显示图片的标题。

3、JavaScript

$('.boxer').boxer();

参数

参数	类型	默认值	说明
callback	function	空	打开后的回调函数
customClass	string	”	增加自定义 class
duration	int	250	动画持续时间
fixed	boolean	false	是否固定在浏览器中央（不显示关滚动条）
formatter	function	空	标题格式函数
height	int	100	加载时的初始高度
labels.close	string	‘Close’	关闭按钮的文字
labels.count	string	‘of’	组图的文字
labels.next	string	‘Next’	下一个按钮的文字
labels.previous	string	‘Previous’	上一个按钮的文字
margin	int	50	与浏览器视口的边距
minHeight	int	100	最小高度
minWidth	int	100	最小宽度
mobile	boolean	false	是否强制使用移动模式显示
opacity	number	0.75	遮罩不透明度
retina	boolean	false	是否兼容 retina 高清显示
requestKey	string	‘boxer’	GET variable for ajax / iframe requests
top	int	距离顶部位置
videoRadio	number	0.5625	视频的高度
videoWidth	int	600	视频的宽度
width	int	100	加载时的初始宽度