Create a Photo Grid using a Vue Component

Photo Grid Component

The Vue.js Photo Grid Component offers easy implementation of image grids, arranging them based on their clusters.

Check the Demo page.

Features

• Arrange depending on their numbers.
• Edit grids width and height.
• Edit grids radius.
• Passess an argument when clicking the excess the images.

API

• boxWidth : edit the grid's Width depending on your ideal choice you can change the size unit (pixels or percentage)
• boxHeight : edit the grid's Height depending on your ideal choice you can change the size unit (pixels or percentage)
• boxBorder : border-radius expects a number
• excessText : change the text whenever the number of your image exceeds 4 and above.

Events

clickExcess : You can pass your method here whenever you click the excess images number.

Example

To start working with the Grid Component use the following command to install it.

$ yarn add vue-photo-grid

Import in your project

import PhotoGrid from 'vue-photo-grid'

Vue.use(PhotoGrid)

data () {
    return {
        images: [
            {
                title: 'image 1',
                url: '..'
            }, {
                title: 'image 2',
                url: '..'
            }, {
                title: 'image 3',
                url: '..'
            }, {
                title: 'image 4',
                url: '..'
            }, {
                title: 'image 5',
                url: '..'
            }, {
                title: 'image 6',
                url: '..'
            }
        ]
    }
},
 methods: {
    triggerClick() {
        // Some code here...
    }
},

Usage:

<div id="photo-grid">
    <photo-grid 
        :box-height="'400px'" 
        :box-width="'30%'" 
        :excess-text="'+ {{count}} images in gallery'" 
        @clickExcess="triggerClick"
        <img v-for="image in images" 
            :src="image.url"
        />
    ></photo-grid>
</div>

If you would like to explore more about the Photo Grid Component, head to the project's repository on GitHub, where you will also find the source code, under an MIT licence.