vue-tinybox
A slick, yet tiny lightbox gallery component for Vue.js
Demo
The live demo can be found at https://NickKaramoff.github.io/vue-tinybox
Install
Node.js
Install the module as you normally would via npm or yarn:
npm install vue-tinybox
yarn add vue-tinybox
Browsers
Just include the link to the Tinybox in your <head>
:
<script src="path/to/vue.js"></script>
<script src="path/to/tinybox.min.js"></script>
Usage
If you're using the Tinybox not from the browser, you'll have to import it:
import Tinybox from "vue-tinybox";
Then you include it your usual way:
Vue.component('tinybox', Tinybox);
Vue.use(Tinybox);
{
components: { Tinybox }
}
Then you can use the Tinybox
component:
<Tinybox
:images="images"
:index="idx"
@close="idx = null"
/>
The Tinybox
component accepts these props:
Prop name | Type | Default | Description |
---|
images | Array | [] | The array of either image URLs or Image objects |
index | Number | null | null |
loop | Boolean | false | Indicates whether the images should loop |
The Image
object is an object with following fields:
Field name | Type | Description |
---|
src | String | The URL of the image |
alt | String | The text to be set inside alt attribute, i.e. text for screen readers or to be shown if the image can't load |
thumbnail | String | The URL of the smaller version of the image to be shown in the thumbnail strip |