Responsive And Customizable Image And Video Gallery – vue-gallery

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.

  • images: an array of images
  • index: initial image displayed in the lightbox
  • options: blueimp-gallery options

5. Event handlers.

  • @open: fired on open
  • @opened: fired on opened
  • @slide: fired on slide
  • @slideend:: fired on slide end
  • @slidecomplete: fired complete
  • @close: fired on close
  • @closed: fired on closed

Preview:

vue-gallery

Changelog:

05/05/2023

  • v2.0.4: blueimp instance is globally declared

Download Details:

Author: RobinCK

Live Demo: https://fiddle.jshell.net/Robin_ck/LffrLb2k/show/light/

Download Link: https://github.com/RobinCK/vue-gallery/archive/master.zip

Official Website: https://github.com/RobinCK/vue-gallery

Install & Download:

# Yarn
$ yarn add vue-gallery

# NPM
$ npm install vue-gallery --save

Add Comment