vue-tinybox
A slick, yet tiny lightbox gallery for Vue.js
- Slick. No excessive design. Pictures, thumbnails, controls.
- Tiny. Dependency-free. 3 KB minified and gzipped.
- Adaptive. Works on computers. Works on tablets. Works on phones.
Demo
Observe the live demo here: 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://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.
Node environment
-
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 }, // ... });
API
Image object
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 |
Props
| 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 |
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:
<Tinybox
v-model="index"
:images="images"
/>
<!-- is equivalent to -->
<Tinybox
:images="images"
:index="index"
@change="(i) => {index = i}"
/>Events
| Event name | Payload | Description |
|---|---|---|
change |
index of the image changed to | Is emitted on any image change (thumbnail navigation, prev/next, close) |
prev/next |
index of the image changed to | Is emitted specifically when the user clicks "Prev"/"Next" or presses Left/Right arrow key |
close |
index of the image Tinybox was closed at | Is emitted specifically when the user clicks "Close" or presses the Esc key |
Events can come in handy for business logic cases:
<Tinybox
:images="images"
v-model="index"
@change="onChange"
@prev="onPrevious"
@next="onNext"
@close="onClose"
/>export default {
// ...
methods: {
onChange(index) {
console.log("User navigated to the photo: ", index);
},
onPrevious(index) {
console.log("User clicked 'previous' to switch to: ", index);
},
onNext(index) {
console.log("User clicked 'previous' to switch to: ", index);
},
onClose(index) {
console.log("User closed TinyBox on this photo: ", index);
}
},
}Browser support
 |
 |
 |
 |
 |
|---|---|---|---|---|
| 21+ | 28+ | 7+ | 16+ | 11 |