A slick, yet tiny lightbox gallery for Vue.js

Description:

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

Install & Download:

# Yarn
$ yarn add vue-tinybox

# NPM
$ npm install vue-tinybox --save

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

Download Details:

Author: NickKaramoff

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

Download Link: https://github.com/NickKaramoff/vue-tinybox/archive/master.zip

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

#vue-js #javascript #vuejs