Vue-tinybox NPM

A slick, yet tiny lightbox gallery for Vue.js

Slick. No excessive design. Pictures, thumbnails, controls.
Tiny. Dependency-free. Less than 3 KB minified and gzipped.
Adaptive. Works on computers. Works on tablets. Works on phones.

Demo

Observe the live demo at https://os.karamoff.dev/vue-tinybox

Basic usage

<Tinybox
    v-model="index"
    :images="images"
    loop
    no-thumbs
/>

Install

Browsers

Include the link to Tinybox in <head> alongside Vue.js:

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-tinybox"></script>

You can of course use jsDelivr instead of unpkg.

Tinybox will auto-install upon detecting the global Vue instance. You can use it right away.

Node environment

Install the Tinybox package:

npm install vue-tinybox
# or
yarn add vue-tinybox

import Tinybox from "vue-tinybox";
// or
const Tinybox = require('vue-tinybox');

Vue.component('Tinybox', Tinybox); //or Vue.use(Tinybox); //or new Vue({ components: { Tinybox }, // ... });

## API

### Image object

An `Image` object is an object with following fields:

| Field name  | Type     | Description                                                           |
|-------------|----------|-----------------------------------------------------------------------|
| `src`       | `String` | The image URL                                                         |
| `alt`       | `String` | (optional) the alt text                                               |
| `thumbnail` | `String` | (optional) The thumbnail (a smaller, square version of the image) URL |

### Props

| Prop name   | Type      | Default | Description                                                   |
|-------------|-----------|---------|---------------------------------------------------------------|
| `images`    | `Array`   | `[]`    | List of either image URLs or [`Image`](#image-object) objects |
| `loop`      | `Boolean` | `false` | Indicates whether the images should loop                      |
| `no-thumbs` | `Boolean` | `false` | When enabled, the thumbnails are hidden                       |

### `v-model`

You can use `v-model` on a `Number` variable, which will hold the index of the
image currently open. If no image is open (i.e. Tinybox is closed), the value
becomes `null`.

Instead of `v-model` you can use the `index` prop and `change` event:

```html
<Tinybox
 v-model="index"
 :images="images"
/>

<!-- is equivalent to -->

<Tinybox
 :images="images"
 :index="index"
 @change="(i) => {index = i}"
/>

vue vuejs vue.js lightbox gallery

@infinitebrahmanuniverse/nolb-vue-ti @everything-registry/sub-chunk-3094 vuejs-img-gallery

2 years ago

2 years ago

2 years ago

5 years ago

5 years ago