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
Install
Browsers
-
Include the link to Tinybox in
<head>
alongside Vue.js: -
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# oryarn add vue-tinybox -
Register it as you usually would:
;// orconst Tinybox = ;Vue;//orVue;//orcomponents: 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:
<!-- is equivalent to -->
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:
// ... methods: { console; } { console; } { console; } { console; }
Browser support
21+ | 28+ | 7+ | 16+ | 11 |