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