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

2022-11-19 0 317



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

 

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

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

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

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

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

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

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

浏览器兼容

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

1. 本站所有资源来源于用户上传和网络,因此不包含技术服务请大家谅解!如有侵权请邮件联系客服!cheeksyu@vip.qq.com
2. 本站不保证所提供下载的资源的准确性、安全性和完整性,资源仅供下载学习之用!如有链接无法下载、失效或广告,请联系客服处理!
3. 您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容资源!如用于商业或者非法用途,与本站无关,一切后果请用户自负!
4. 如果您也有好的资源或教程,您可以投稿发布,成功分享后有积分奖励和额外收入!
5.严禁将资源用于任何违法犯罪行为,不得违反国家法律,否则责任自负,一切法律责任与本站无关

源码下载

发表评论
暂无评论