Get unlimited public & private packages + team-based management with npm Teams.Learn more »

vue-light-gallery

1.0.1 • Public • Published

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

Install

npm i vue-light-gallery

DownloadsWeekly Downloads

1,204

Version

1.0.1

License

MIT

Unpacked Size

118 kB

Total Files

7

Last publish

Collaborators

  • avatar