Giter VIP home page Giter VIP logo

photo-grid's Introduction

Photo Grid Component

npm version

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

photo-grid's People

Contributors

orlyyani avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

photo-grid's Issues

class "grid-component" instead of #id

Thank you for your great work with this plugin.

I'm using multiple photo-grid component in my project and I found that you use id="grid-component" that make inconsistent styling when I try to add/remove image in another photo-grid component, any changes inside one photo-grid component will affect another photo-grid component because it uses the same Id.

And it breaks column dividing.

If you could fix it, that would be perfect.

excess-text doesn't update and the excess section doesn't appear on image list change

When updating data in a list the excess-text count is not updating accordingly.
When there are 5 images in the grid and I've added another image data dynamically to the array, then the excess text should increase. But it is not increasing. Similarly, when there are 4 images and I'm adding another image data into the array, then the excess section should appear. But it is not appearing until I reload the page.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.