Create an image gallery with the Lightbox component for Vue.js

vlightbox

Add a simple gallery for showcasing your favorite photos, with the native lightbox component for Vue.js. Just install the component and pass your array of images and you 'll have a gallery ready for display.

Checkout the Interactive Demo.

Example

Installation & Usage

yarn add vlightbox

Register the component

import lightbox from 'vlightbox'
Vue.use(lightbox)

Image settings

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

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

In the markup:

<template>
<div id="app">
    <lightbox 
        :images="images" 
        title="Feed Gallery"
    ></lightbox>
</div>
</template>

As a result

Other available options are:

  • Remove all styles to the image gallery, overlay not included :resetstyles="false"
  • Add h1 with title above gallery title="Demo Gallery"
  • Loop back to the first image when at the end of the gallery :loop="true"
  • Show next, back and close buttons on overlay :nav="true"
  • Show captions on images with the caption property :caption="true"

If you would like to use and contribute to vlightbox, find the repo on GitHub.