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