vue-light-gallery

VueJS lightweight image gallery for both mobile and desktop browsers.

• Standalone: Zero-dependencies.
• Fully responsive.
• Keyboard and Touch support.
• Multiple galleries on one page.
• Lazy & smart image preloading.
• Color customization.

Demo

View Demo

License

MIT License

install

// Yarn
yarn add vue-light-gallery
 
// NPM
npm install vue-light-gallery

Usage

As a local component

<template>
  <div>
    <LightGallery
      :images="images"
      :index="index"
      :disable-scroll="true"
      @close="index = null"
    />
    <ul>
      <li
        v-for="(thumb, thumbIndex) in [
          'path/to/thumb_1.jpeg',
          'path/to/thumb_2.jpeg',
        ]"
        :key="thumbIndex"
        @click="index = thumbIndex"
      >
        <img :src="thumb">
      </li>
    </ul>
  </div>
</template>
 
<script>
  import Vue from 'vue';
  import { LightGallery } from 'vue-light-gallery';
 
  export default {
    components: {
      LightGallery,
    },
    data() {
      return {
        images: [
          { title:'img 1', url: 'path/to/image_1.jpg' },
          { title:'img 2', url: 'path/to/image_2.jpg' },
        ],
        index: null,
      };
    },
  };
</script> 

As a Global component

// Your APP entry point.
// F.E: index.js
import Vue from 'vue';
import LightGallery from 'vue-light-gallery';
 
Vue.use(LightGallery);
 
new Vue(/* ... */);

<!-- Component.vue -->
<template>
  ...
    <LightGallery ...props />
  ...
</template>

Or if you want to change the component id:

// Your APP entry point.
// F.E: index.js
import Vue from 'vue';
import LightGallery from 'vue-light-gallery';
 
Vue.use(VueLightGallery, { componentId: 'custom-gallery' });
 
new Vue(/* ... */);

<!-- Component.vue -->
<template>
  ...
    <custom-gallery ...props />
  ...
</template>

Props

Props	Type	Default	Description
images	Array	[]	List of Images
index	Number	null	index of the displayed image
disableScroll	Boolean	false	Disable the scroll
background	String	rgba(0, 0, 0, 0.8)	Main container background
interfaceColor	String	rgba(255, 255, 255, 0.8)	Icons color

Images definition

Without title: Array<string>

  const images = [
    'http://url.com/img1.jpg',
    'http://url.com/img2.jpg',
  ];

With title: Array<Object>

  const images = [
    { title: 'image 1', url: 'http://url.com/img1.jpg' },
    { title: 'image 2', url: 'http://url.com/img2.jpg' },
  ];

The title will only appear if Object.title property is defined.

Events

Name	Params	Description
close		Triggered when the lightbox is closed
slide	{ index: Number }	Triggered when the image change (next or prev)

Usage with Nuxt

Create the plugin lightGallery.client.js:

import Vue from 'vue';
import VueLightGallery from 'vue-light-gallery';
 
Vue.use(VueLightGallery);

Add the plugin to nuxt.config.js:

plugins: [
  '~/plugins/lightGallery.client.js',
],

Wrap the component in Nuxt's no-ssr component.

<no-ssr>
  <LightGallery ... />
</no-ssr>

Allusions

• Inspired by BaguetteBox
• Spinner extracted from epic-spinners