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

Live demo

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)

<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.