# lightbox-preview.js

> 使用原生 JavaScript 编写的 lightbox 弹出层图片预览插件，不依赖任何库和框架，开箱即用，自适应宽度。

Latest version **1.0.3** (published 2020-06-05) · ISC license · 0 weekly downloads

## Install

```sh
npm install lightbox-preview.js
pnpm add lightbox-preview.js
yarn add lightbox-preview.js
bun add lightbox-preview.js
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.3 |
| Published | 2020-06-05 |
| First published | 2020-06-05 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 866.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 8 |
| Maintainers | tflin |
| Keywords | javascript, 图片预览, lightbox |

## Links

- npm: https://www.npmjs.com/package/lightbox-preview.js
- Repository: https://github.com/tflins/lightbox
- Homepage: https://github.com/tflins/lightbox#readme
- Issues: https://github.com/tflins/lightbox/issues
- npm.io page: https://npm.io/package/lightbox-preview.js

## Alternatives

- [react-native-root-siblings](https://npm.io/package/react-native-root-siblings.md) — 102.9K weekly downloads
- [@praxisui/dialog](https://npm.io/package/@praxisui/dialog.md) — 2.0K weekly downloads
- [easy-toggle-state](https://npm.io/package/easy-toggle-state.md) — 350 weekly downloads
- [ngx-lightbox-evp](https://npm.io/package/ngx-lightbox-evp.md) — 19 weekly downloads
- [react-native-modal-translucent-axton](https://npm.io/package/react-native-modal-translucent-axton.md) — 4 weekly downloads

## Recent versions

- 1.0.3 (latest) — 2020-06-05
- 1.0.2 — 2020-06-05
- 1.0.1 — 2020-06-05
- 1.0.0 — 2020-06-05

## README

# 原生 JavaScript lightbox 弹出层插件

## 插件介绍

使用原生 JavaScript 编写的 lightbox 弹出层图片预览插件，不依赖任何库和框架，开箱即用，自适应宽度。

## 预览图

![preimg1](demo/images/preimg2.gif)
![preimg1](demo/images/preimg1.gif)

## 演示地址

**[点击查看演示](http://tflin.com/demo/lightbox/)**

## 安装

### Github

[dist/lightbox.js](https://github.com/tflins/lightbox/blob/master/dist/lightbox.js)

### NPM

```bash
npm i lightbox-preview.js -S
```

## 使用方法

### Browser (ES5)

将 dist/lightbox.js 引用到 HTML 中。接着给 img 添加自定义属性，其中：

```txt
data-rote="lightbox" ---> 表示该图片要启用lightbox
data-soure="images/0.jpg" ---> 原图地址
data-group="group-1" ---> 标识当前图片组别
data-id="xxxxdad" ---> 图片的唯一标识
data-caption="绝世美女" ---> 图片的描述
```

然后 ```new Lightbox()``` 即可，如：

```html
<img
  data-rote="lightbox"
  data-soure="images/0.jpg"
  data-group="group-1"
  data-id="qewsdq"
  data-caption="绝世美女"
  src="images/0.jpg"
  alt="美女"
  width="200px"
>

<script type="text/javascript" src="lightbox.js"></script>
<script type="text/javascript">
  (function() {
    var lightbox = new Lightbox()
  }())
</script>
```

### ES Module

```bash
npm i lightbox-preview.js -S
```

```js
import Lightbox 'lightbox-preview.js'

new Lightbox()
```

## 更新记录

2020年1月16日：代码重构

2018年9月20日：修复IE浏览器及低版本Chrome的兼容问题

## License

MIT 一起来扣细节~

---
_Source: https://npm.io/package/lightbox-preview.js · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._