/vue-light-gallery

VueJS lightweight image gallery for both mobile and desktop browsers

Primary LanguageVue

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