Lightbox.js
阅读量：3271
发布时间：2015-10-25 20:03:40
一、简介
Lightbox(图片灯笼插件)是一款很酷的图片显示插件，可以在一个平滑展开的新窗口中展现出图片，而同时页面的其余部分都变成黑色背景。是为了当你的的图片过大必须缩小到页面的宽度时，可以让读者在当前页面浏览完整大小的图片，而不用离开。
二、使用方法
1.引入文件
<!-- 样式文件 --> <link rel="stylesheet" type="text/css" href="/css/lightbox.css"> <!-- js文件 必须在lightbox.js之前引入 jQuery.js 1.7+文件(lightbox.js是基于jQuery开发的图片浏览插件) --> <script src="/js/jquery-2.1.4.min.js"></script> <script src="/js/lightbox.min.js"></script> <!-- 或者是引入 jQuery 和 lightbox 集合版 --> <script src="/js/lightbox-plus-jquery.min.js"></script>
2.HTML代码
在你需要显示的图片灯笼前面添加a标签，添加class="example-image-link" href是你的展示的大图图片地址，data-lightbox为分组（组名相同为同一个相册），ata-title是所需要显示的简介。
<div> <a class="example-image-link" href="/images/lightbox_11.jpg" data-lightbox="example-1" data-title="一眼就是一世界"> <img class="example-image" src="/images/lightbox_11.jpg" alt="image-1" /> </a> <a class="example-image-link" href="/images/lightbox_12.jpg" data-lightbox="example-2" data-title="我存于这俗世烟火的浮世，我爱这时光倒影的浮城"> <img class="example-image" src="/images/lightbox_12.jpg" alt="image-1"/> </a> </div>
3.说明
Lightbox.js可以不用初始化，就可以直接调用。
img标签和a的结束标签之间有空格会在空格处显示下划线。
在img标签中显示缩略图，在a标签中显示的完整图片链接，减少网站响应时间。
三、配置
修改配置参数就需要添加js代码：
lightbox.option({
'resizeDuration': 200,
'wrapAround': true
})
配置参数说明：
布尔值 数字 布尔 字符串 类型 数字 数字 布尔值 布尔值
| 选项 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| alwaysShowNavOnTouchDevices | 布尔值 | false | 观看图片集合时候：true永远显示左右箭头。 |
| fadeDuration | 数字 | 500 | 淡入淡出所花的时间，单位毫秒。 |
| fitImagesInViewport | 布尔 | true | 调整图像位置，true正好显示在可见区域，不会显示滚动条 |
| maxWidth | 字符串 | 最大宽度，单位px | |
| maxHeight | 字符串 | 最大高度，单位px | |
| positionFromTop | 数字 | 50 | 灯箱容器距离顶端的距离 |
| resizeDuration | 数字 | 700 | 灯箱容器的图片显示动画加载时间，单位毫秒 |
| showImageNumberLabel | 布尔值 | true | 图片数量、文字是否显示。 |
| wrapAround | 布尔值 | false | 当用户点击最后一个图片的时候，是否可以返回第一张图片 |
当前没有评论