lightGallery – 支持触屏滑动的响应式相册jQuery插件
发表于:HTML & CSS . 评论
赞助商链接 
大多数网页喜欢采用 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> 插件名称：Light Gallery 相册展示插件
演示地址： http://sachinchoolur.github.io/lightGallery/
下载地址： https://github.com/sachinchoolur/lightGallery
交流：UI设计交流群：375537101（ 快速加入 ），与500名设计师交流设计，分享素材。
设计导航：小盆友和大神都值得拥有的设计师网址导航： http://hao.shejidaren.com
正文到此结束
热门推荐
相关文章
近期评论
-
文章和留言都翻到11页了 没有OOM
-
-
朋友，翻页到11页，及以后，会出现OOM，无法访问
-
-
搞个gitee的项目
-
-
版本号是多少，你可以下载哪个代码仓库，jdk选1.8 直接跑就行
-
-
-
Loading...
![[HBLOG]公众号](https://www.liuhaihua.cn/img/qrcode_gzh.jpg)
