vue-gallery
📷 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
Yarn
yarn add vue-gallery
Nuxt
- Add a new file named
vue-gallery.client.js
to your nuxt plugins folder. It is important that your filename ends in.client.js
(more info on this convention, only works from Nuxt v.2.4.0). - Copy paste the following content in it:
Vue
- Add it to your list of plugins in
nuxt.config.js
:
plugins: '~plugins/vue-gallery.client.js'
- You can now use the component globally:
<v-gallery :images="images" :index="index" @close="index = null" />
Usage
VueJS single file (ECMAScript 2015)
Browser (ES5)
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 |
Development Setup
# install dependenciesnpm install# build dist filesnpm run build
Contributors
Code Contributors
This project exists thanks to all the people who contribute. [Contribute].
Financial Contributors
Become a financial contributor and help us sustain our community. [Contribute]
Individuals
Organizations
Support this project with your organization. Your logo will show up here with a link to your website. [Contribute]
License
MIT © Igor Ognichenko