Nuclearly Potent Moonshine

    npm-moa-gallery

    1.1.4 • Public • Published

    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

    alt text

    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)

    <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 "npm-moa-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.

    Install

    npm i npm-moa-gallery

    DownloadsWeekly Downloads

    2

    Version

    1.1.4

    License

    MIT

    Unpacked Size

    37.2 kB

    Total Files

    10

    Last publish

    Collaborators

    • amem