Slick Gallery Lightbox Component - vue-tinybox

Install & Download:

# Yarn
$ yarn add vue-tinybox
# NPM
$ npm install vue-tinybox --save

Description:

A tiny, slick, cross-platform lightbox gallery component for Vue.js apps.

How to use it:

1. Install and import the vue-tinybox component.

import Tinybox from "vue-tinybox";

2. Register the component.

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

3. Create a lightbox component in the template.

<Tinybox v-model="index" :images="images"></Tinybox>
<img
  v-for="(img, idx) in images"
  :src="img.thumbnail"
  :alt="img.alt"
  class="open-tinybox"
  @click="index = idx"
>

new Vue({
    components: { Tinybox },
    el: '#demo-app',
    data: function () {
      return {
        images: [
          {
            src: "1.jpg",
            alt: "Alt 1",
            thumbnail: "thumb-1.jpg"
          },
          {
            src: "2.jpg",
            alt: "Alt 2",
            thumbnail: "thumb-3.jpg"
          },{
            src: "3.jpg",
            alt: "Alt 3",
            thumbnail: "thumb-3.jpg"
          }
        ],
        index: null
      }
    }
});