A vue 2 based modern gallery which can be used instead of a cover photo

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.

Getting start

$ 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)

<Gallery :images="images" ></Gallery>

Structure of the image array (href is required other 2 fields optional)

[{
            title: "",
            description: "",
            href: ""
 }]

Example Vue-2 component

<template>
  <Gallery :images="images" ></Gallery>
</template>
  
<script>
import Gallery from "vue-cover-gallery"
export default {
  
  name: "Example",
  components: {
    Gallery
  },
  data() {
    return {
      images: [
            {
            title: "title 1",
            description: "des 1",
            href: "https://www.exapleimages.com/first.jpg"},
            {
             title: "title 2",
            description: "des 2",
            href: "https://www.exapleimages.com/second.jpg"
            },
     ],
    };
  },
};
</script>

<style scoped>

</style>

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.