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:
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