Package Exports

vue-photo-grid

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (vue-photo-grid) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Photo Grid Component

This component let you automatically arrange the photos depending on their clusters.

Examples

For examples, refer to the demo page.

NPM

 npm install vue-photo-grid

Features!

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

Usage

import PhotoGrid from 'vue-photo-grid';
 
Vue.use(PhotoGrid);

Sample

<template>
  <div id="photo-grid">
    <photo-grid :box-height="'200px'" :box-width="'20%'" :excess-text="'+ {{count}}'" v-on:clickExcess="triggerClick">
      <img v-for="imahe in images" v-bind:src="imahe.url"/>
    </photo-grid>
  </div>
</template>

<script>
export default {
  data () {
    return {
      images: [
        {
          title: "image 1",
          url: "https://img00.deviantart.net/e895/i/2017/275/7/d/ultra_sun_ultra_moon_by_kawacy-dbpbuiq.jpg" 
        }, {
          title: "image 2",
          url: "https://img00.deviantart.net/870d/i/2009/174/d/b/sweet_summer_ii_by_zanasoul.jpg" 
        }, {
          title: "image 3",
          url: "https://pre00.deviantart.net/9b5b/th/pre/i/2017/205/c/8/electra_by_mistanphotography-dbhgxsz.jpg" 
        }, {
          title: "image 4",
          url: "https://img00.deviantart.net/47b3/i/2017/140/0/7/wonder_woman_by_pencilhead7-db9w9lw.png" 
        }, {
          title: "image 5",
          url: "https://orig00.deviantart.net/2b7a/f/2017/275/5/6/daily_paint_1777__swineapple_by_cryptid_creations-dbpboas.png" 
        }, {
          title: "image 6",
          url: "https://pre00.deviantart.net/a41c/th/pre/i/2015/014/9/8/swan_by_avine-d8dw53d.jpg" 
        }
      ]
    }
  },

  methods: {
    triggerClick() {
      // Some code here...
    }
  },
}
</script>

Using Options

All read more options were converted to props to be able use them in the vue-photo-grid component.

Usage

<photo-grid :box-height="'500px'" :box-width="'500px'" :excess-text="'+ {{count}}'" v-on:clickExcess="triggerClick">
  <img v-for="imahe in images" v-bind:src="imahe.url"/>
</photo-grid>

API

Option	Type	Default	Description
`boxWidth`	`String`	`200px`	let you edit the grids Width depending on your ideal choice you can change the size unit (pixels or percentage)
`boxHeight`	`String`	`200px`	let you edit the grids Height depending on your ideal choice you can change the size unit (pixels or percentage)
`boxBorder`	`Number`	`0`	This feature makes you add the border og the grid.
`excessText`	`String`	`View more {{count}} images`	You can change the text whenever the number of your image exceeds 4 and above.

Note: You can customize the text between the {{count}} in the excessText. Note that {{count}} is the default value of the excess number in your list of images.

Events

Name	Description
`clickExcess`	You can pass your method here whenever you click the excess images number.

License

MIT

Use at your own risk! with ❤️ by Lyor