lightGallery是一款轻量级、可定制、响应式、模块化的jQuery LightBox图片画廊插件。它支持移动触摸设备,支持键盘控制,带20多种动画过渡效果,是一款非常优秀的LightBox插件。它的特点还有:
- 完全响应式。
- 内置插件的模块化结构。
- 支持移动手机触摸屏。
- 支持在桌面设备使用鼠标拖拽。
- 缩略图动画。
- 支持Youtube,Vimeo和HTML5视频。
- 20多种硬件加速CSS3动画过渡效果。
- 动态模式。
- 支持全屏模式。
- 支持缩放。
- 支持浏览器history API。
- 响应式图片。
- 支持iframe框架。
- 同一个页面可以实例化多个实例。
- 通过CSS可以很容易的修改样式。
- 智能图像预载及代码优化。
- 支持桌面设备中使用键盘导航。
- 支持字体图标。
安装
你可以通过Bower或nmp来安装该LightBox插件。
$ bower install lightgallery --save $ npm install lightgallery
使用方法
使用该LightBox插件需要引入lightGallery.css,jQuery(版本大于1.8),lightgallery.min.js文件,以及辅助的lg-thumbnail.min.js和lg-fullscreen.min.js文件。
<!-- jQuery version must be >= 1.8.0; --> <script src="jquery.min.js"></script> <script src="js/lightgallery.min.js"></script> <!-- lightgallery plugins --> <script src="js/lg-thumbnail.min.js"></script> <script src="js/lg-fullscreen.min.js"></script>
HTML结构
该LightBox插件没有强制性的HTML结构,但是建议使用下面的HTML结构来构建:
<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>
初始化插件
在页面DOM元素加载完毕之后,可以通过下面的方法来初始化该LightBox插件。
<script type="text/javascript"> $(document).ready(function() { $("#lightgallery").lightGallery(); }); </script>
配置参数
Lightgallery有非常多的可用参数,使用参数的方法如下:
$('#lightgallery').lightGallery({ mode: 'lg-fade', cssEasing : 'cubic-bezier(0.25, 0, 0.25, 1)' ...... });
核心参数
参数名称 | 类型 | 默认值 | 描述 |
mode | string | 'lg-slide' | 画廊的动画过渡效果。可用的效果有:'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'。关于这些效果的详细解释可以参考这里 |
cssEasing | string | 'ease' | 使用CSS动画的easing效果 |
easing | string | 'linear' | 使用jQuery动画的easing效果 |
speed | number | 600 | 动画过渡的持续时间,单位毫秒 |
height | string | '100%' | 画廊的高度。例如:'100%','300px' |
width | string | '100%' | 画廊的宽度。例如:'100%','300px' |
addClass | string | '' | 在画廊上添加自定义的class类,通过它为画廊设置不同的样式 |
startClass | string | 'lg-start-zoom' | 画廊的开始动画的class类 |
backdropDuration | number | 150 | 画廊的backdrop transtion持续时间。不要通过CSS来修改这个值 |
hideBarsDelay | number | 6000 | 隐藏画廊的控制面板的延迟时间,单位毫秒 |
useLeft | boolean | false | 强制插件使用left属性来替代transform属性 |
closable | boolean | true | 是否允许点击按钮来关闭LightBox画廊 |
loop | boolean | true | 设置为false 时,将不能在最后一张图片时返回第一张图片 |
escKey | boolean | true | 是否可以通过“ESC”键来关闭LightBox画廊 |
keyPress | boolean | true | 是否允许键盘导航 |
controls | boolean | true | 如果设置为false ,prev/next按钮将不会显示 |
slideEndAnimatoin | bolean | true | Enable slideEnd animation |
hideControlOnEnd | boolean | false | 如果设置为true ,prev/next按钮将不会在第一张和最后一张图片时显示 |
mousewheel | boolean | true | 是否允许使用鼠标来滚动LightBox画廊 |
appendSubHtmlTo | string | '.lg-sub-html' | 指定“sub-html”添加在何处。'.lg-sub-html' 或 '.lg-item' |
preload | number | 1 | 预加载图片的数量,会在当前的slide完全加载后执行 |
showAfterLoad | boolean | true | 在完全加载后显示内容 |
selector | string | '' | Custom selector property instead of just child. pass this to select same element ex : .class #id |
nextHtml | string | '' | 自定义“next”控制按钮的HTML |
prevHtml | string | '' | 自定义“prev”控制按钮的HTML |
index | number | 0 | 设置哪一个图片或vedio在初始化时被显示 |
iframeMaxWidth | string | '100%' | 设置iframe的最大宽度 |
download | boolean | true | 是否启用下载按钮。 |
counter | boolean | true | 是否显示图片的总数量和当前图片的序号 |
appendCounterTo | string | '.lg-toolbar' | counter添加到什么地方 |
swipeThreshold | number | 50 | 通过设置swipeThreshold(单位像素),你可以控制用户滑动前一幅和下一幅图片的速度 |
enableDrag | boolean | true | 是否允许在桌面设备中使用鼠标来拖拽 |
enableTouch | boolean | true | 是否支持移动触摸 |
dynamic | boolean | false | 设置该选项为true 和填写dynamicEl 选项可以使LightGallery以编程的方式实例化 |
dynamicEl | array | [] | 代表画廊对象的数组对象(src, iframe, subHtml, thumb, poster, responsive, srcset sizes) |
更多关于该LightBox插件的参数,方法和事件的信息可以参考:https://github.com/sachinchoolur/lightGallery/
版权声明
版权说明: 仅限用于学习和研究目的;不得将上述内容用于商业和非法用途!否则一切后果自负。我们非常重视版权问题,如有侵权请邮件至(171373236#qq.com)与我们联系处理,敬请谅解!