支持触屏滑动的响应式相册jQuery插件
发布时间：2025-09-10 点击：5
大多数网页喜欢采用 lightbox 形式来展示相册图像，特别是电子商务购物网站最为常见，灯箱插件很多，若你还没找到一款称心的图像展示插件，可以看看今天设计达人网为大家分享的 lightgallery jquery相册插件。
light gallery 插件使用响应式设计，良好兼容手机端，并支持触膜滑动方式来观看图像，简单直观的操作。
该相册插件功能丰富，下面列出一些特色：
全响应式兼容全屏展示模块化架构触屏滑动图像缩略图动画支持视频展示支持iframe框架图像可放大缩小一个页面上可放多个demo可能过css(scss)定制样式键盘切换图像支持字体图标
浏览器兼容
ie8+ 以及主流浏览器
使用教程
step 1 : 加载外部样式
<head><link type=”text/css” rel=”stylesheet” href=”css/lightgallery.css” /></head>
step 2 : 引入jquery插件和lightgallery相册插件
<body>….
<!– jquery 版本 >= 1.8.0; –><script src=”jquery.min.js”></script><script src=”js/lightgallery.min.js”></script>
<!– 支持鼠标滑轮东键盘操作插件（可选）–><script src=”https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js”></script>
<!– lightgallery 插件 –><script src=”js/lg-thumbnail.min.js”></script><script src=”js/lg-fullscreen.min.js”></script></body>
step 4 : 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>
step 4 : js 代码，用于激活插件
<script type=”text/javascript”>$(document).ready(function() {$(“#lightgallery”).lightgallery();});</script>
做网站及网赚的经验分享
做网站到底价格重要还是性能重要呢？
SEO合理的关键词优化步骤
西安网站优化：完整的网站推广步骤
开发小程序的主要方式——企业应如何选择？
有哪些学习策划的网站？
以营销思维推进企业网站推广高速发展
企业网站如何提高用户的留存率？
light gallery 插件使用响应式设计，良好兼容手机端，并支持触膜滑动方式来观看图像，简单直观的操作。
该相册插件功能丰富，下面列出一些特色：
全响应式兼容全屏展示模块化架构触屏滑动图像缩略图动画支持视频展示支持iframe框架图像可放大缩小一个页面上可放多个demo可能过css(scss)定制样式键盘切换图像支持字体图标
浏览器兼容
ie8+ 以及主流浏览器
使用教程
step 1 : 加载外部样式
<head><link type=”text/css” rel=”stylesheet” href=”css/lightgallery.css” /></head>
step 2 : 引入jquery插件和lightgallery相册插件
<body>….
<!– jquery 版本 >= 1.8.0; –><script src=”jquery.min.js”></script><script src=”js/lightgallery.min.js”></script>
<!– 支持鼠标滑轮东键盘操作插件（可选）–><script src=”https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.13/jquery.mousewheel.min.js”></script>
<!– lightgallery 插件 –><script src=”js/lg-thumbnail.min.js”></script><script src=”js/lg-fullscreen.min.js”></script></body>
step 4 : 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>
step 4 : js 代码，用于激活插件
<script type=”text/javascript”>$(document).ready(function() {$(“#lightgallery”).lightgallery();});</script>
做网站及网赚的经验分享
做网站到底价格重要还是性能重要呢？
SEO合理的关键词优化步骤
西安网站优化：完整的网站推广步骤
开发小程序的主要方式——企业应如何选择？
有哪些学习策划的网站？
以营销思维推进企业网站推广高速发展
企业网站如何提高用户的留存率？
上一篇：网站设计有哪些值得借鉴