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.
Observe the live demo here: os.karamoff.dev/vue-tinybox
<Tinybox
v-model="index"
:images="images"
loop
no-thumbs
/>-
Include the link to Tinybox in
<head>alongside Vue.js:<script src="https://cdn.jsdelivr.net/npm/vue"></script> <script src="https://cdn.jsdelivr.net/npm/vue-tinybox"></script>
-
Tinybox will auto-install upon detecting the global Vue instance. You can use it right away.
-
Install the Tinybox package:
npm install vue-tinybox # or yarn add vue-tinybox -
Register it as you usually would:
import Tinybox from "vue-tinybox"; // or const Tinybox = require('vue-tinybox'); Vue.component('Tinybox', Tinybox); //or Vue.use(Tinybox); //or new Vue({ components: { Tinybox }, // ... });
An Image object is an object with following fields:
| Field name | Type | Description |
|---|---|---|
src |
String |
Image URL |
thumbnail |
String |
(optional) Thumbnail URL. If omitted, the image URL will be used |
caption |
String |
(optional) Caption text to be overlayed on the image |
alt |
String |
(optional) Alt text. If omitted, the caption will be used |
| Prop name | Type | Default | Description |
|---|---|---|---|
images |
Array |
[] |
List of either image URLs or Image objects |
loop |
Boolean |
false |
Indicates whether the images should loop |
no-thumbs |
Boolean |
false |
When enabled, the thumbnails are hidden |
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:
<Tinybox
v-model="index"
:images="images"
/>
<!-- is equivalent to -->
<Tinybox
:images="images"
:index="index"
@change="(i) => {index = i}"
/> |
 |
 |
 |
 |
|---|---|---|---|---|
| 21+ | 28+ | 7+ | 16+ | 11 |