功能齐全的jquery图片查看器插件

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
});

 

posted @   东绕城  阅读(264)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 展开说说关于C#中ORM框架的用法!
点击右上角即可分享
微信分享提示