最后提交 npm npm标签树摇优化点击量

lightGallery

一个可定制、模块化、响应式的灯箱图库插件。无依赖。可用于React.js、Angular、Vue.js和TypeScript。

lightgallery

核心特性

完全响应式。
具有内置插件的模块化架构。
针对触摸设备高度优化。
支持桌面端鼠标拖拽。
双击/双击查看图片实际大小。
动画缩略图。
社交分享。
支持YouTube、Vimeo、Wistia和HTML5视频。
20多种硬件加速的CSS3过渡效果。
动态模式。
内联图库。
全屏支持。
放大/缩小，支持捏合缩放。
向上/向下滑动或拖动以关闭图库。
浏览器历史API（深度链接）。
响应式图片。
支持HTML iframe。
同一页面上支持多个实例。
通过CSS（SCSS）和设置轻松自定义。
智能图片预加载和代码优化。
桌面端键盘导航。
SVG图标。
无障碍支持。
旋转、翻转图片。
以及更多功能。

文档

安装

lightGallery可在NPM、Yarn、Bower、CDN和GitHub上获取。您可以使用以下任何方法下载lightGallery。

NPM - NPM是JavaScript编程语言的包管理器。您可以使用以下命令安装lightgallery
```
npm install lightgallery
```
YARN - Yarn是另一个流行的JavaScript编程语言包管理器。如果您喜欢，可以使用Yarn代替NPM
```
yarn add lightgallery
```
Bower - 您也可以在Bower包管理器中找到lightGallery
```
bower install lightgallery --save
```
GitHub - 您也可以直接从GitHub下载lightgallery
CDN - 如果您更喜欢使用CDN，可以通过jsdelivr、cdnjs或unpkg加载文件

包含CSS和JavaScript文件

首先，在文档的中包含lightgallery.css。如果您想包含任何lightGallery插件（如缩略图或缩放），也需要包含相应的css文件。

或者，您可以包含lightgallery-bundle.css，它包含lightGallery和所有插件样式，而不是单独的样式表。

如果您喜欢，也可以从scss文件夹导入scss文件而不是css文件。

<head>
    <link type="text/css" rel="stylesheet" href="css/lightgallery.css" />
<!-- lightgallery 插件 -->
<link type="text/css" rel="stylesheet" href="css/lg-zoom.css" />
<link type="text/css" rel="stylesheet" href="css/lg-thumbnail.css" />

<!-- 或者 -->

<link type="text/css" rel="stylesheet" href="css/lightgallery-bundle.css" />
</head>

然后将 lightgallery.umd.js 包含到你的文档中。如果你想包含任何 lightgallery 插件，可以在 lightgallery.umd.js 之后包含它。

<body>
    ....

    <script src="js/lightgallery.umd.js"></script>

    <!-- lightgallery 插件 -->
    <script src="js/plugins/lg-thumbnail.umd.js"></script>
    <script src="js/plugins/lg-zoom.umd.js"></script>
</body>

lightGallery 也支持 AMD、CommonJS 和 ES6 模块。

import lightGallery from 'lightgallery';

// 插件
import lgThumbnail from 'lightgallery/plugins/thumbnail'
import lgZoom from 'lightgallery/plugins/zoom'

标记

lightgallery 不强制你使用任何特定的标记。你可以使用任何你想要的标记。这里可以找到不同类型标记的详细示例。

如果你知道媒体的原始尺寸，可以通过 data-lg-size="${width}-${height}" 属性传递，用于初始缩放动画。但这完全是可选的。

<div id="lightgallery">
    <a href="img/img1.jpg" data-lg-size="1600-2400">
        <img alt=".." src="https://raw.githubusercontent.com/sachinchoolur/lightGallery/master/img/thumb1.jpg" />
    </a>
    <a href="img/img2.jpg" data-lg-size="1024-800">
        <img alt=".." src="https://raw.githubusercontent.com/sachinchoolur/lightGallery/master/img/thumb2.jpg" />
    </a>
    ...
</div>

初始化 lightGallery

最后，你需要通过添加以下代码来初始化画廊。

<script type="text/javascript">
    lightGallery(document.getElementById('lightgallery'), {
        plugins: [lgZoom, lgThumbnail],
        speed: 500,
        licenseKey: '你的许可证密钥'
        ... 其他设置
    });
</script>

CodePen 演示