功能齐全的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 }); |
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 展开说说关于C#中ORM框架的用法!