simple-lightbox.min.js 是一款基于 jQuery 的 Lightbox 插件-BFW插件库

simple-lightbox.min.js 是一款基于 jQuery 的 Lightbox 插件

simple-lightbox.min.js 是一款基于 jQuery 的 Lightbox 插件，它具有以下特点：
响应式设计
触控/触摸友好
提供多项配置
图像预加载
支持 iOS / Android / Windows phone
使用 CSS3 过度效果，并回退兼容旧浏览器
支持 jQuery 1.x 和 2.x 版本
支持键盘控制

使用方式：

第一步引入bfwone 加载依赖项jquery

第二步use插件及css

第三步配置

名称	类型	默认值	说明
overlay	布尔值	true	显示遮罩
spinner	布尔值	true	显示 Loading 效果
nav	布尔值	true	显示左右导航
navText	数组	[‘←’,’→’]	左右导航的文本
captions	布尔值	true	显示标题/描述
captionsData	字符串	title	标题/描述来源，可指定 title 或 data-title
close	布尔值	true	显示关闭按钮
closeText	整数	123456	关闭按钮的文本
fileExt	正则表达式	‘png\|jpg\|jpeg\|gif’	限制图片格式
animationSpeed	整数	250	动画过度时间
preloading	布尔值	true	预加载图片
enableKeyboard	布尔值	true	键盘支持，方向键控制，Esc 退出
loop	布尔值	true	循环
docClose	布尔值	true	点击空白处关闭
swipeTolerance	整数	50	移动设备上滑动多少像素开始切换
className	字符串	simple-lightbox	添加 class
widthRatio	浮点数	0.8	图像宽度于屏幕宽度的的比例
heightRatio	浮点数	0.9	图像宽度于屏幕高度的的比例

示例如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>BFW NEW PAGE</title>
    <script id="bfwone" data="dep=jquery.17&err=0" type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/bfwone.js"></script>
    <script type="text/javascript">
        bready(function() {
            use(["simple-lightbox.min", "simplelightbox.min"], function() {
                $('.bfwcont a').simpleLightbox();
            });
        });
    </script>
    <style>
        .bfwcont {
            width: 790px;
            margin: 0 auto;
            font-size: 0;
        }
        .bfwcont a {
            display: inline-block;
            width: 150px;
            margin: 5px;
        }
        .bfwcont .big {
            width: 300px;
        }
        .bfwcont img {
            width: 100%;
            border: 0;
        }
    </style>

</head>
<body>
    <h1>默认效果</h1>

    <div class="bfwcont">
        <a href="//repo.bfw.wiki/bfwrepo/image/slicebox/4.jpg" class="big"><img src="//repo.bfw.wiki/bfwrepo/image/slicebox/4.jpg" alt="" title="第一张图片描述"></a>
        <a href="//repo.bfw.wiki/bfwrepo/image/slicebox/3.jpg" class="big"><img src="//repo.bfw.wiki/bfwrepo/image/slicebox/3.jpg" alt="" title="第二张图片描述"></a>
        <a href="//repo.bfw.wiki/bfwrepo/image/slicebox/2.jpg" class="big"><img src="//repo.bfw.wiki/bfwrepo/image/slicebox/2.jpg" alt="" title="第三张图片描述"></a>
        <a href="//repo.bfw.wiki/bfwrepo/image/slicebox/1.jpg" class="big"><img src="//repo.bfw.wiki/bfwrepo/image/slicebox/1.jpg" alt="" title="第四张图片描述"></a>
        <a href="//repo.bfw.wiki/bfwrepo/image/slicebox/4.jpg" class="big"><img src="//repo.bfw.wiki/bfwrepo/image/slicebox/4.jpg" alt="" title="第五张图片描述"></a>
    </div>



</body>
</html>