Vuejs Image Gallery

Developed By Anamol Soman

| Tab View | Mobile View | | :----------------------------------------------------------------------------------------------------------------: | :----------------------------------------------------------------------------------------------------------------: | | | |

Vuejs image gallery is a responsive and customizable image gallery.

Features

• Simple and attractive
• Customizable
• Fully Responsive

Tech

Image gallery uses a number of open source projects to work properly:

• [Vuejs] - JavaScript framework
• [Vuetify] - UI library

And of course Dillinger itself is open source with a public repository on GitHub.

Installation

Install the dependencies and devDependencies and start the server.

npm install vuejs-image-gallery

Usage

Import the component like this

import Gallery from "vuejs-image-gallery";

Add the component in your template

 <Gallery
      :images="images"
      :imageWidth="720"
      :imageHeight="auto"
      :popUpMaxWidth="720"
      :mdCols="4"
      :smCols="4"
      :xsCols="6"
      :lgCols="2"
    />

Pass the required data in script

export default {
    name: "App",
    data() {
        return {
            images: [{
                    id: 1,
                    imgSrc: require("@/assets/1.png")
                },
                {
                    id: 2,
                    imgSrc: require("@/assets/2.jpg")
                },
                {
                    id: 3,
                    imgSrc: require("@/assets/3.jpg")
                },
                {
                    id: 4,
                    imgSrc: require("@/assets/4.jpg")
                },
                {
                    id: 5,
                    imgSrc: require("@/assets/5.jpg")
                },
                {
                    id: 6,
                    imgSrc: require("@/assets/6.jpg")
                }
            ]
        };
    },
    components: {
        Gallery
    }
};

In image src you can pass location of your source

Note: `Id should be in proper numbers

Customization

Vuejs image gallery is having some customizable options so you can make changes as per your requirements.

| Props | Values | | ------------- | ---------------------------------------------------- | | images | Array of object which contain id and url of image | | imageWidth | Width of popup image | | imageHeight | Height of popup image | | popUpMaxWidth | Maximum width of the popup | | mdCols | Number of images you want in medium screen size | | smCols | Number of images you want in small screen size | | xsCols | Number of images you want in extra small screen size | | lgCols | Number of images you want in large screen size |

License

MIT

Free Software, Hell Yeah!