jQuery轻量级画廊插件lightGallery

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

jQuery lightGallery 是个轻量级的 jQuery 画廊,用来展示图像和视频gallery。
主要特性:

  • 全响应式布局兼容,支持触摸屏移动设备

  • 可以转换 CSS

  • 支持 Youtube Vimeo 视频

  • 支持iframe框架

  • 支持图片放大缩小

  • 支持滑块和渐变效果

  • 支持 Chrome, Safari, Firefox, Opera, IE7+, IOS, Android, windows phone

  • 支持图片标题和描述

  • 支持同一页面多个滑块,非常容易通过 CSS 和设置来进行自定义 轻量级 (8kb) (minified)

  • 支持缩略图动画,为移动设备单独设置图片,可以进行扩展和调用

  • 智能图片预加载和代码优化

  • 全屏展示

  • 模块化架构

  • 桌面键盘导航

  • 支持字体图标

浏览器兼容

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 3 :  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 相册展示插件

 官方演示        源码及下载
赞(52) 打赏
未经允许不得转载:优客志 » 前端设计
分享到:

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏