lightbox-功能强大的图片灯箱特效插件

lightbox-功能强大的图片灯箱特效插件
插件描述:Lightbox 应该是最流行的图片浏览效果了,常具有功能包括:自动根据窗口的大小缩放图片,模式窗口,幻灯片方式播放,内容预加载,渐变等效果。

使用方法

载入JavaScript和CSS文件:

<link rel="stylesheet" href="dist/css/lightbox.min.css" />
// jQuery与lightbox分别载入:
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="dist/js/lightbox.min.js"></script>
// jQuery与lightbox一块载入, 这是作者将二者打包在了一块:
<script type="text/javascript" src="dist/js/lightbox-plus-jquery.min.js" ></script>

DOM结构:

/**
data-lightbox 值一样的将作为一个图像集显示, 并显示左右控制按钮
data-title 将显示的图片的下方, 作为图片的说明
*/
//独立图片:
<a href="images/image-1.jpg" data-lightbox="example-1">
  <img src="images/thumb-1.jpg" alt="" />
</a>
//一组图像集:
 <a href="images/image-3.jpg" data-lightbox="example" data-title="img01">
  <img src="images/thumb-3.jpg" alt=""/>
</a>
<a href="images/image-4.jpg" data-lightbox="example" data-title="img02">
  <img src="images/thumb-4.jpg" alt="" /></a>
<a href="images/image-5.jpg" data-lightbox="example" data-title="img03">
  <img src="images/thumb-5.jpg" alt="" />
</a>

JavaScript调用方式:

//默认情况下不写, 如果要更改配置文件, 格式如下:
lightbox.option({
  'resizeDuration': 200,
  'wrapAround': true
})

参数说明

名称 类型 默认值 说明
alwaysShowNavOnTouchDevices boolean false
albumLabel string "Image %1 of %2" 查看图像集时显示在标题下方的文本(%1:当前图像的顺序, %2:总图像数量)
disableScrolling boolean false 如果为true, 将禁止页面滚动, 图片过大时将无法全部显示
fadeDuration integer 600 灯箱容器淡入淡出的时间, 单位:毫秒
fitImagesInViewport boolean true true时, 图像将以合适的大小显示; false时, 图像将完整显示, 但可能需要滚动页面才可以完全看到
imageFadeDuration integer 600 图片加载后的淡入的时间, 单位:毫秒
maxWidth

如果设置, 图片宽度将被固定为这个数字, 单位:像素
maxHeight

如果设置, 图片高度将被固定为这个数字, 单位:像素
positionFromTop integer 50 灯箱容器从顶部出现的位置, 单位:像素
resizeDuration integer 700 灯箱容器适应图片大小时的过渡时间, 单位:毫秒
showImageNumberLabel boolean true 如果为false, albumLabel将被隐藏
wrapAround boolean false 如果为true, 将可以循环查看图像集