# @hunter.tran/tlightbox

> Native Vue.js lightbox

Latest version **3.1.2** (published 2020-09-04) · MIT license · 0 weekly downloads

## Install

```sh
npm install @hunter.tran/tlightbox
pnpm add @hunter.tran/tlightbox
yarn add @hunter.tran/tlightbox
bun add @hunter.tran/tlightbox
```

## 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 | 3.1.2 |
| Published | 2020-09-04 |
| First published | 2019-12-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 5 |
| Unpacked size | 5 KB |
| Known vulnerabilities | 0 (+2 in 2 direct dependencies) |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Hunter Tran |
| Maintainers | hunter.tran |
| Keywords | lightbox, vlightbox, tlightbox, vue, Hunter Tran |

## Links

- npm: https://www.npmjs.com/package/@hunter.tran/tlightbox
- Repository: https://github.com/huntertran/tlightbox
- Issues: https://github.com/huntertran/tlightbox/issues
- npm.io page: https://npm.io/package/@hunter.tran/tlightbox

## Dependencies (5)

- [vue](https://npm.io/package/vue.md) ^2.6.12
- [core-js](https://npm.io/package/core-js.md) ^3.4.3
- [webpack](https://npm.io/package/webpack.md) ^4.44.1
- [node-sass](https://npm.io/package/node-sass.md) ^4.14.1
- [sass-loader](https://npm.io/package/sass-loader.md) ^10.0.2

## 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

- 3.1.2 (latest) — 2020-09-04
- 3.1.1 — 2019-12-12

## README

![Build Status](https://github.com/huntertran/tlightbox/workflows/Node%20CI/badge.svg)
![Publish Status](https://github.com/huntertran/tlightbox/workflows/Node.js%20Package/badge.svg)

<!-- TOC -->

- [1. Demo](#1-demo)
- [2. Install](#2-install)
    - [2.1. Vue Compatibility](#21-vue-compatibility)
    - [2.2. NPM](#22-npm)
- [3. Usage](#3-usage)
    - [3.1. Register the component](#31-register-the-component)
    - [3.2. Image settings](#32-image-settings)
    - [3.3. Other options](#33-other-options)

<!-- /TOC -->


Simple native Vue.js lightbox

# 1. Demo
<a id="markdown-1-demo" name="1-demo"></a>
https://huntertran.github.io/tlightbox/

# 2. Install
<a id="markdown-2-install" name="2-install"></a>

## 2.1. Vue Compatibility
<a id="markdown-21-vue-compatibility" name="21-vue-compatibility"></a>
> Compatible with Vue 2.0

## 2.2. NPM
<a id="markdown-22-npm" name="22-npm"></a>
```bash
$ npm install tlightbox
```

# 3. Usage
<a id="markdown-3-usage" name="3-usage"></a>

## 3.1. Register the component
<a id="markdown-31-register-the-component" name="31-register-the-component"></a>

```js
import lightbox from 'tlightbox';
Vue.use(lightbox);
```

Basic markup should look like this

```html
<lightbox :images="images"></lightbox>
```

## 3.2. Image settings
<a id="markdown-32-image-settings" name="32-image-settings"></a>

Accepts array containing image objects, properties accepted are caption and src.

```js
images: [
    {
        src: 'https://unsplash.it/500',
        thumbnail: 'https://unsplash.it/500'
        caption: 'Image 1',
    },
    {
        src: 'https://unsplash.it/501',
    },
],
```

## 3.3. Other options
<a id="markdown-33-other-options" name="33-other-options"></a>

Remove all styles to the image gallery, overlay not included
- Default: `false`

```js
:resetstyles="false" 
```

Add h1 with title above gallery
- Default: null

```js
:title="Demo Gallery" 
```

Show loading when image is not downloaded
- Default: `true`

Setup loading styles: Normal or Heart Icon
- Default: `normal`

```html
<lightbox :isShowLoading='true' :loadingStyle='heart'></lightbox>
```

Loop back to the first image when at the end of the gallery
- Default: `true`

```js
:loop="true" 
```

Show next, back and close buttons on overlay
- Default: `true`
```js
:nav="true" 
```

Show captions on images with the caption property
- Default: `true`
```js
:caption="true"
```

---
_Source: https://npm.io/package/@hunter.tran/tlightbox · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._