Slick Lightbox Componnet – vue-tinybox

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
      }
    }
});

Preview:

Changelog:

v1.3.0 (07/12/2020)

• Add prev, next, close events

v1.2.0 (06/27/2020)

• Fixed regexp mask array

Download Details:

Author: kytta

Live Demo: https://os.karamoff.dev/vue-tinybox

Download Link: https://github.com/kytta/vue-tinybox

Official Website: https://github.com/NickKaramoff/vue-tinybox

Install & Download:

# Yarn
$ yarn add vue-tinybox

# NPM
$ npm install vue-tinybox --save