Nifty Pony Merchandise

    vue-photo-grid

    1.0.2 • Public • Published

    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

    Install

    npm i vue-photo-grid

    DownloadsWeekly Downloads

    82

    Version

    1.0.2

    License

    MIT

    Last publish

    Collaborators

    • lyor