lightGallery – 支持触屏滑动的响应式相册jQuery插件 | 设计达人

lightGallery – 支持触屏滑动的响应式相册jQuery插件

十一月 18, 2015 发表于: HTML & CSS. 评论 (1)

赞助商链接

大多数网页喜欢采用 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

推荐：查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com
交流：结交更多有才华的设计师？请加入UI设计QQ群，与50000名设计师交流设计。

赞助商链接

与 jQuery、lightbox、灯箱插件 相关的文章

赞助商链接

设计达人微信交流社区：shejidaren888

喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。
版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。

Original url: Access
Created at: 2019-04-15 14:14:29
Category: default
Tags: none

未标明原创文章均为采集，版权归作者所有，转载无需和我联系，请注明原出处，南摩阿彌陀佛，知识，不只知道，要得到

请先后发表评论
  • 最新评论
  • 总共1条评论
DeepMind

Rain酱：

用 layui 显示 图太 low 啦。。改用这个

2019-04-15 14:47:29 回复