vue-gallery
:camera: VueJS responsive and customizable image and video gallery, carousel and lightbox, optimized for both mobile and desktop web browsers.
Install
CDN
Recommended: https://unpkg.com/vue-gallery, which will reflect the latest version as soon as it is published to npm. You can also browse the source of the npm package at https://unpkg.com/vue-gallery/
NPM
npm install vue-gallery --save
Yarn
yarn add vue-gallery
Development Setup
npm install
npm run build
Usage
VueJS single file (ECMAScript 2015)
<template>
<div>
<gallery :images="images" :index="index" @close="index = null"></photoSwipe>
<button type="button" @click="index = 0"></button>
</div>
</template>
<script>
import Gallery from 'vue-gallery';
export default {
data() {
return {
images: [
'https://dummyimage.com/800/ffffff/000000',
'https://dummyimage.com/1600/ffffff/000000',
'https://dummyimage.com/1280/000000/ffffff',
'https://dummyimage.com/400/000000/ffffff',
],
index: null,
};
},
components: {
Gallery
},
}
</script>
Browser (ES5)
<script type="text/javascript" src="blueimp-gallery.min.js"></script>
<script type="text/javascript" src="vue.js"></script>
<script type="text/javascript" src="vue-gallery.js"></script>
<div id="app">
<gallery :images="images" :index="index" @close="index = null"></photoSwipe>
<button type="button" @click="index = 0"></button>
</div>
<script type="text/javascript">
new Vue({
el: '#app',
data: function() {
return {
images: [
'https://dummyimage.com/800/ffffff/000000',
'https://dummyimage.com/1600/ffffff/000000',
'https://dummyimage.com/1280/000000/ffffff',
'https://dummyimage.com/400/000000/ffffff',
],
index: null,
};
},
components: {
'gallery': VueGallery
},
});
</script>
Props
Props | Type | Default | Description |
---|
images | Array | [] | Urls list |
index | Number | null | Opened image index |
options | Object | | blueimp-gallery options |
Events
Name | Params | Description |
---|
close | | Close |
License
MIT © Igor Ognichenko