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

jopen 9年前


大多数网页喜欢采用 lightbox 形式来展示相册图像,特别是电子商务购物网站最为常见,灯箱插件很多,若你还没找到一款称心的图像展示插件,可以看看今天设计达人网为大家分享的 lightGallery jQuery相册插件。

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

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

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

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

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

lightGallery – 支持触屏滑动的响应式相册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