lighgallery支持响应式相册jQuery插件与触摸屏滑动-2345资源网

lighgallery支持响应式相册jQuery插件与触摸屏滑动

大多数网站都喜欢用lightbox来显示相册图片，尤其是电子商务网站，有很多lightbox插件，如果你还没有找到一个满意的图片显示插件，可以看看今天大家分享的lighgallery jQuery相册插件。

图片[1]-lighgallery支持响应式相册jQuery插件与触摸屏滑动-2345资源网 - 精品建站资源与技术分享平台

Light Gallery 插件使用响应式设计，良好兼容手机端，并支持触膜滑动方式来观看图像，简单直观的操作。

图片[2]-lighgallery支持响应式相册jQuery插件与触摸屏滑动-2345资源网 - 精品建站资源与技术分享平台

该相册插件功能丰富，下面列出一些特色：

全响应式兼容
全屏展示
模块化架构
触屏滑动图像
缩略图动画
支持视频展示
支持iFrame框架
图像可放大缩小
一个页面上可放多个DEMO
可能过CSS(SCSS)定制样式
键盘切换图像
支持字体图标

图片[3]-lighgallery支持响应式相册jQuery插件与触摸屏滑动-2345资源网 - 精品建站资源与技术分享平台

浏览器兼容

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

文章版权归作者所有，未经允许请勿转载。

THE END

技术教程
# jquery官网

lighgallery支持响应式相册jQuery插件与触摸屏滑动

浏览器兼容

使用教程

请登录后发表评论