vue-gallery
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 |
Other my Vue JS plugins
Project | Status | Description |
---|---|---|
vue-ls | Vue plugin for work with local storage, session storage and memory storage from Vue context | |
vue-popper | VueJS popover component based on popper.js |
License
MIT © Igor Ognichenko