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

| Property | Required | Type | Default | Description |-------------|-----------|-------|----------|------------ |active | yes |Boolean| | display or hide lightbox |images | yes |Array | | array of images to render |prev-icon | no |String | | prev icon class |next-icon | no |String | | next icon class |close-icon | no |String | | close icon class |bg-color | no |String | #000 | background color lightbox |loop | no |Boolean| false | enable looping in images |initial-index| no |Number | 0 | initial image to be selected for display

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