Responsive And Customizable Image And Video Gallery - vue-gallery

Install & Download:

# Yarn
$ yarn add vue-gallery
# NPM
$ npm install vue-gallery --save

Description:

A responsive, customizable, cross-platform gallery, carousel and lightbox component for Vue.js. Supports both images and videos.

Based on the Blueimp Gallery.

How To Use It:

1. Import the VueGallery module.

import VueGallery from 'vue-gallery';

2. Insert the component into your app template:

<template>
  <div>
    <gallery :images="images" :index="index" @close="index = null"></gallery>
    <div
      class="image"
      v-for="(image, imageIndex) in images"
      :key="imageIndex"
      @click="index = imageIndex"
      :style="{ backgroundImage: 'url(' + image + ')', width: '300px', height: '200px' }"
    ></div>
  </div>
</template>

3. Render the image gallery on your app.

export default {
  data: function () {
    return {
      images: [
        '1.jpg',
        '2.jpg',
        '3.jpg',
        '4.jpg',
      ],
      index: null
    };
  },
  components: {
    'gallery': VueGallery
  },
}

4. Possible props to customize the gallery.