程序喵大多数网页喜欢采用 lightbox 形式来展示相册图像，特别是电子商务购物网站最为常见，灯箱插件很多，若你还没找到一款称心的图像展示插件，可以看看今天设计达人网为大家分享的 lightGallery jQuery相册插件。
jQuery lightGallery 是个轻量级的 jQuery 画廊，用来展示图像和视频gallery。
主要特性：
全响应式布局兼容，支持触摸屏移动设备
可以转换 CSS
支持 Youtube Vimeo 视频
支持iframe框架
支持图片放大缩小
支持滑块和渐变效果
支持 Chrome, Safari, Firefox, Opera, IE7+, IOS, Android, windows phone
支持图片标题和描述
支持同一页面多个滑块，非常容易通过 CSS 和设置来进行自定义 轻量级 (8kb) (minified)
支持缩略图动画，为移动设备单独设置图片，可以进行扩展和调用
智能图片预加载和代码优化
全屏展示
模块化架构
桌面键盘导航
支持字体图标
浏览器兼容
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 3 : 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>插件名称：Light Gallery 相册展示插件
未经允许请勿转载：程序喵 » jQuery轻量级画廊插件lightGallery