vue-cover-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
Example
Getting start
Install boostrap,jQuery and popper.js (ignore these 2 steps if you already have)
$ npm i bootstrap jquery popper.js
Import to your main.js
import 'bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
After installing this dependencies
$ npm i vue-cover-gallery --save
Then imprort gallery to a vue component.
import Gallery from "vue-cover-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.