一个非常好用的网页版图片查看器插件
lightgallery.js是一款功能齐全的jquery图片查看器插件。该jquery图片查看器插件采用响应式设计，提供图片查看，图片轮播，图片放大等功能。它的特点还有：
- 以模态窗口的形式全屏展示图片。
- 显示图片的标题。
- 可以实现图片的懒加载。
- 可以自动播放图片，并提供进度条显示。
- 可以通过鼠标拖拽，点击切换按钮，移动设备滑动等方式来切换图片轮播。
- 在底部显示图片的缩略图。
- 支持图片的平移和缩放。
- 提供下载按钮来下载图片。
使用方法
在页面中引入jquery和lightgallery-all.min.js文件以及样式文件lightgallery.css。
|
1
2
3
|
< link href="css/lightgallery.css" rel="stylesheet">
< script src="js/jquery.min.js">
< script src="js/lightgallery-all.js">
|
HTML结构
实现在页面中创建一个图片画廊，示例demo中以无序列表的方式来创建。通过data-src属性来指定高清大图的地址。你还可以在data-responsive属性中指定多个图片地址，分别用于适配不同设备的屏幕。data-sub-html属性用于指定图片的标题。
|
1
2
|
< ul id="lightgallery" class="list-unstyled row">
< li data-responsive="img/1-375.jpg 375, img/1-480.jpg 480, img/1.jpg 800" data-src="img/1-1600.jpg" data-sub-html="
|
Fading Light< p >图片标题1"> < a href=""> < img class="img-responsive" src="img/thumb-1.jpg"> < li data-responsive="img/2-375.jpg 375, img/2-480.jpg 480, img/2.jpg 800" data-src="img/2-1600.jpg" data-sub-html="
Bowness Bay< p >图片标题2"> < a href=""> < img class="img-responsive" src="img/thumb-2.jpg"> < li data-responsive="img/13-375.jpg 375, img/13-480.jpg 480, img/13.jpg 800" data-src="img/13-1600.jpg" data-sub-html="
Bowness Bay< p >图片标题3"> < a href=""> < img class="img-responsive" src="img/thumb-13.jpg"> < li data-responsive="img/4-375.jpg 375, img/4-480.jpg 480, img/4.jpg 800" data-src="img/4-1600.jpg" data-sub-html="
Bowness Bay< p >图片标题4"> < a href=""> < img class="img-responsive" src="img/thumb-4.jpg">
初始化插件
在页面DOM元素加载完毕之后，通过lightGallery方法来初始化该jquery图片查看器插件。
|
1
2
3
|
$(document).ready( function (){
$( '#lightgallery' ).lightGallery();
});
|
配置参数
该jquery图片查看器插件的可用配置参数如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
$( '#lightgallery' ).lightGallery({
mode: "lg-slide" ,
cssEasing: "ease" ,
easing: "linear" ,
speed: 600,
height: "100%" ,
width: "100%" ,
addClass: "" ,
startClass: "lg-start-zoom" ,
backdropDuration: 150,
hideBarsDelay: 6000,
useLeft: false ,
closable: true ,
loop: true ,
escKey: true ,
keyPress: true ,
controls: true ,
slideEndAnimatoin: true ,
hideControlOnEnd: false ,
mousewheel: true ,
getCaptionFromTitleOrAlt: true ,
appendSubHtmlTo: ".lg-sub-html" ,
subHtmlSelectorRelative: false ,
preload: 1,
showAfterLoad: true ,
selector: "" ,
selectWithin: "" ,
nextHtml: "" ,
prevHtml: "" ,
index: false ,
iframeMaxWidth: "100%" ,
download: true ,
counter: true ,
appendCounterTo: ".lg-toolbar" ,
swipeThreshold: 50,
enableSwipe: true ,
enableDrag: true ,
dynamic: false ,
dynamicEl: [],
galleryId: 1
});
|
来源：https://www.cnblogs.com/mybook000/p/18568249
本站大部分文章、数据、图片均来自互联网,一切版权均归源网站或源作者所有。
如果侵犯了您的权益请来信告知我们删除。邮箱：1451803763@qq.com