gallery-vue
v1.1.9
Published
VueJS responsive and customizable image and video gallery, carousel and lightbox, optimized for both mobile and desktop web browsers. Support Youtube and Vimeo.
Downloads
25
Maintainers
Readme
gallery-vue
This project originally based on project RobinCK (vue-gallery). Here added new features such Vimeo support, improved styling and etc. Soon all information and links on this page will be updated.
:camera: VueJS responsive and customizable image and video gallery, carousel and lightbox, optimized for both mobile and desktop web browsers.
Example
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
# install dependencies
npm install
# build dist files
npm run build
Usage
VueJS single file (ECMAScript 2015)
<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>
<script>
import VueGallery from 'vue-gallery';
export default {
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>
<style scoped>
.image {
float: left;
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
border: 1px solid #ebebeb;
margin: 5px;
}
</style>
Browser (ES5)
<script type="text/javascript" src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script type="text/javascript" src="https://unpkg.com/[email protected]/js/blueimp-helper.js"></script>
<script type="text/javascript" src="https://unpkg.com/[email protected]/js/blueimp-gallery.js"></script>
<script type="text/javascript" src="https://unpkg.com/[email protected]/js/blueimp-gallery-fullscreen.js"></script>
<script type="text/javascript" src="vue-gallery.js"></script>
<link rel="stylesheet" type="text/css" href="https://unpkg.com/[email protected]/css/blueimp-gallery.min.css">
<div id="app">
<gallery :images="images" :index="index" @close="index = null"></gallery>
<div
class="image"
v-for="image, imageIndex in images"
@click="index = imageIndex"
:style="{ backgroundImage: 'url(' + image + ')', width: '300px', height: '200px' }"
></div>
</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 | | -----------------|:------------------------|--------------| | onopen | | | | onopened | | | | onslide | | | | onslideend | | | | onslidecomplete | | | | onclose | | | | onclosed | | |
License
MIT © Ruslan Kedrovski