vue-slim-lightbox v0.1.3

vue-slim-lightbox

A simple lightbox for vue

Installation

yarn add vue-slim-lightbox

or

npm install vue-slim-lightbox --save

Live Demo

Important

Before using, import the css file into your project's index.js

import 'vue-slim-lightbox/dist/vue-slim-lightbox.css'

Locally registration

<template>
  <lightbox
    :images="images"
    :initial-index="index"
    :active="active"
    prev-icon="any-icon-class"
    next-icon="any-icon-class"
    bg-color="#000"
    @close="onClose"
  />
</template>

<script>
import { Lightbox } from 'vue-slim-lightbox'
import 'vue-slim-lightbox/dist/vue-slim-lightbox.css'

export default {
  computed: {
    images() {
      return [
        { src: 'https://path-to-your-image.com', title: 'Test title', description: 'Any description here' },
        { src: 'https://path-to-your-image.com', description: 'Any description here' },
        { src: 'https://path-to-your-image.com', title: 'Test title' },
        { src: 'https://path-to-your-image.com' }
      ]
    },
    data() {
      return { index: 0, active: true }
    },
    methods: {
      onClose() {
        this.active = false
      }
    }
  },
  components: { Lightbox }
}
</script>

Globally registration

import Vue from 'vue'
import Lightbox from 'vue-slim-lightbox'
import 'vue-slim-lightbox/dist/vue-slim-lightbox.css'

Vue.use(Lightbox)

Array image formats

const images = [
  {
    src: 'https://path-to-image.com', //required,
    title: 'Title image', //optional
    description: 'Description image', //optional
  }
]

Props

To developer's

Project setup

yarn install

Compiles and hot-reloads for development

yarn run serve

Compiles and minifies for production

yarn run build

Run your tests

yarn run test

Lints and fixes files

yarn run lint

Run your unit tests

yarn run test:unit