你的位置:首页 > Java教程

[Java教程]lightgallery.js


在线预览    源码下载

lightgallery.js是一款纯JavaScript轻量级响应式lightbox插件。该Lightbox插件支持图片,视频,iframe等多种媒体。支持全屏,导航,缩放,下载等功能,还支持多种动画过渡效果。lightgallery.js的特点还有:

  • 完全响应式设计。
  • 内置插件的模块化体系结构。
  • 支持移动触摸设备。
  • 桌面设备中可以通过鼠标拖拽来切换。
  • 鼠标双击可以查看原尺寸的大图。
  • 缩略图带动画特效。
  • 支持各种视频。
  • 支持20多种硬件加速的CSS3过渡动画。
  • 支持动态加载模式。
  • 支持全屏模式。
  • 支持图片的缩放。
  • 支持HTML5 history API。
  • 响应式图片。
  • 支持HTML iframe。
  • 同一个页面支持多个实例。
  • 智能加载图片及代码优化。
  • 桌面设备支持键盘导航。
  • 支持字体图标。

 安装

可以通过npm和bower来安装lightgallery.js插件。

1
2
bower install lightgallery.js --save
npm install lightgallery.js                 



 使用方法

在页面中引入lightgallery.css和lightgallery.min.js文件。如果你需要某项功能可以单独引入相关文件,如全屏功能引入lg-fullscreen.min.js,缩略图功能引入lg-thumbnail.min.js等。

1
2
3
4
5
<link rel="stylesheet" href="css/lightgallery.css">
<script src="js/lightgallery.min.js"></script>
<script src="js/lg-thumbnail.min.js"></script>
<script src="js/lg-fullscreen.min.js"></script>
...                 



 HTML结构

建议使用下面的HTML结构来构建一个图片画廊。

1
2
3
4
5
6
7
8
9
<div id="lightgallery">
    <a href="img/img1.jpg">
        <img src="img/thumb1.jpg">
    </a>
    <a href="img/img2.jpg">
        <img src="img/thumb2.jpg">
    </a>
    ...
</div>       



你可以查看这里来获取其它HTML结构的使用方法。

 初始化插件

在页面底部通过下面的方法来初始化该lightbox插件。

1
2
3
<script>
    lightGallery(document.getElementById('lightgallery'));
</script>      



 配置参数

 核心配置参数
参数类型默认值描述
modestring'lg-slide'图片过渡的动画类型。可用的动画有:'lg-slide''lg-fade''lg-zoom-in''lg-zoom-in-big''lg-zoom-out''lg-zoom-out-big''lg-zoom-out-in''lg-zoom-in-out''lg-soft-zoom''lg-scale-up''lg-slide-circular''lg-slide-circular-vertical''lg-slide-vertical''lg-slide-vertical-growth''lg-slide-skew-only''lg-slide-skew-only-rev''lg-slide-skew-only-y''lg-slide-skew-only-y-rev''lg-slide-skew''lg-slide-skew-rev''lg-slide-skew-cross''lg-slide-skew-cross-rev''lg-slide-skew-ver''lg-slide-skew-ver-rev''lg-slide-skew-ver-cross''lg-slide-skew-ver-cross-rev''lg-lollipop''lg-lollipop-rev''lg-rotate''lg-rotate-rev''lg-tube'
cssEasingstring'ease'easing过渡动画类型。
speednumber600过渡动画的持续时间。单位毫秒。
heightstring'100%'图片画廊的高度。
widthstring'100%'图片画廊的宽度。
addClassstring''为画廊添加自定义的class。
startClassstring'lg-start-zoom'画廊的开始动画类型。
backdropDurationnumber150Lightgallery backdrop transtion duration
hideBarsDelaynumber6000隐藏图片画廊控制按钮的延迟时间,单位毫秒。
useLeftbooleanfalse强制lightgallery使用left属性来代替transform。
closablebooleantrue允许用户点击暗处关闭图片画廊。
loopbooleantrue是否循环播放。
escKeybooleantrue是否允许通过"Esc"键来关闭图片画廊。
keyPressbooleantrue是否允许键盘导航。
controlsbooleantrue是否显示前后导航按钮。
slideEndAnimatoinboleantrue是否允许slideEnd 动画。
hideControlOnEndbooleanfalse如果设置为false,第一幅和最后一幅图片不显示前后导航按钮。
getCaptionFromTitleOrAltbooleantrue从图片的alt或title标签获取图片描述信息。
appendSubHtmlTostring'.lg-sub-html'指定添加sub-html:'.lg-sub-html' 或 '.lg-item'
subHtmlSelectorRelativebooleanfalse如果使用"data-sub-html"选择器作为当前项目的源,设置为true。
preloadnumber1预加载slider的数量。
showAfterLoadbooleantrue是否在完全加载后显示内容。
selectorstring''自定义选择器来替代子元素。
selectWithinstring''By default selectror element is taken from only inside the gallery element. Instead of that you can tell lightgallery to select element within a specific
nextHtmlstring''Next按钮的html标记。
prevHtmlstring''Prev按钮的html标记。
indexnumber0设置被立刻加载的图片/视频的索引。
iframeMaxWidthstring'100%'设置iframe的最大宽度。
downloadbooleantrue是否使用下载按钮。
counterbooleantrue是否显示图片的总数和当前图片的索引。
appendCounterTostring'.lg-toolbar'指定被添加的计数器。
swipeThresholdnumber50触摸滑动的阈值。
enableDragbooleantrue在桌面设备是否允许鼠标拖动。
enableTouchbooleantrue是否允许移动触摸。
dynamicbooleanfalse通过编程的方式动态调用插件。
dynamicElarray[]代表画廊元素的数组。

在线预览    源码下载