• 1. Demo
• 2. Install
  • 2.1. Vue Compatibility
  • 2.2. NPM
• 3. Usage
  • 3.1. Register the component
  • 3.2. Image settings
  • 3.3. Other options

Simple native Vue.js lightbox

1. Demo

https://huntertran.github.io/tlightbox/

2. Install

2.1. Vue Compatibility

Compatible with Vue 2.0

2.2. NPM

$ npm install tlightbox

3. Usage

3.1. Register the component

import lightbox from 'tlightbox';
Vue.use(lightbox);

Basic markup should look like this

<lightbox :images="images"></lightbox>

3.2. Image settings

Accepts array containing image objects, properties accepted are caption and src.

images: [
    {
        src: 'https://unsplash.it/500',
        thumbnail: 'https://unsplash.it/500'
        caption: 'Image 1',
    },
    {
        src: 'https://unsplash.it/501',
    },
],

3.3. Other options

Remove all styles to the image gallery, overlay not included

• Default: false

:resetstyles="false" 

Add h1 with title above gallery

• Default: null

:title="Demo Gallery" 

Show loading when image is not downloaded

• Default: true

Setup loading styles: Normal or Heart Icon

• Default: normal

<lightbox :isShowLoading='true' :loadingStyle='heart'></lightbox>

Loop back to the first image when at the end of the gallery

• Default: true

:loop="true" 

Show next, back and close buttons on overlay

• Default: true

:nav="true" 

Show captions on images with the caption property

• Default: true

:caption="true"