npm-moa-gallery
This is a vue 2 based modern gallery which can be used instead of a cover photo. First 5 images in the array will be displayed in the cover view; however, if the array has less than 5 images, first image will be displayed as the cover photo and other imgaes can be viewed by clicking on an image or invoking the 'View Photos' button.
This Gallery is a modification of vue-Gallery
Getting start
$ npm i npm-moa-gallery --save
Then imprort gallery to a vue component.
import Gallery from "npm-moa-gallery"
Then include Gallery as a child component
components: { Gallery },
Include the the Gallery in HTML divition (give image array as an Input)
Structure of the image array (href is required other 2 fields optional)
[{ title: "", description: "", href: "" }]
Example Vue-2 component
Modifications/Build/Contribution
You can import directly from npm or clone from git hub modify and build.
GitHub repository.
- clone from Github.
- install dependencies.
npm install
- For live testing excute below line from the root directory.
vue serve ./src/example/example.vue
- Do your modifications.
- Run a build
npm run build
-
You can use build files in dist folder
-
You should install blueimp-gallery (dependency) exteranally for this case.
npm i blueimp-gallery --save
import * as Gallery from "./gallery.umd.js (path to gallery.umd.js)"
- Then do all things, same as
Getting start
section.