https://github.com/seanghay/vue-photo-collage

A "react-photo-collage" but for Vue
https://github.com/seanghay/vue-photo-collage

collage vue vue2

Last synced: about 1 month ago
JSON representation

A "react-photo-collage" but for Vue

• Host: GitHub
• URL: https://github.com/seanghay/vue-photo-collage
• Owner: seanghay
• License: mit
• Created: 2021-12-16T04:52:57.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2022-04-23T09:45:50.000Z (over 2 years ago)
• Last Synced: 2024-09-28T18:01:46.351Z (about 2 months ago)
• Topics: collage, vue, vue2
• Language: Vue
• Homepage: https://npmjs.com/package/vue-photo-collage
• Size: 57.6 KB
• Stars: 5
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Vue Photo Collage

[![Publish to NPM Registry](https://github.com/seanghay/vue-photo-collage/actions/workflows/publish.yml/badge.svg)](https://github.com/seanghay/vue-photo-collage/actions/workflows/publish.yml)

A Vue.js@2 version of [react-photo-collage](https://github.com/sopetrichor/react-photo-collage)



### CodeSandbox

[![Edit vue-photo-collage](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/vue-photo-collage-lzbbq?fontsize=14&hidenavigation=1&theme=dark)

## Installation

```

npm i vue-photo-collage

```

## Usage

```vue

  


     

  


import { PhotoCollageWrapper } from 'vue-photo-collage'

export default {

  components: {

    PhotoCollageWrapper,

  },

  methods: {

    itemClickHandler(data, i) {

      // click event

    }

  },

  data() {

    return {

      collage: {

        width: "1200px",

        height: ["400px", "400px"],

        layout: [2, 3],

        photos: [

          {

            source:

              "https://images.unsplash.com/photo-1517088455889-bfa75135412c?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=e5548929376f93d8b1b7a21097df03bd&auto=format&fit=crop&w=749&q=80",

          },

          {

            source:

              "https://images.unsplash.com/photo-1526656892012-7b336603ed46?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=31c8e58b58c25dfcc18452ed29b52951&auto=format&fit=crop&w=334&q=80",

          },

          {

            source:

              "https://images.unsplash.com/photo-1521024221340-efe7d7fa239b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=9ad8a99d809d3fa3a9e8dff3ecc81878&auto=format&fit=crop&w=750&q=80",

          },

          {

            source:

              "https://images.unsplash.com/photo-1523038793606-2fd28f837a85?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=919b76f4229e41416653aeb10e84e94a&auto=format&fit=crop&w=334&q=80",

          },

          {

            source:

              "https://images.unsplash.com/photo-1516832970803-325be7a92aa5?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=93d7ac9abad6167aecb49ebd67fd5b6d&auto=format&fit=crop&w=751&q=80",

          },

          {

            source:

              "https://images.unsplash.com/photo-1526938972776-11558ad4de30?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=973795a277e861265b0fabbf4a96afe2&auto=format&fit=crop&w=750&q=80",

          },

          {

            source:

              "https://images.unsplash.com/photo-1464550838636-1a3496df938b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=f22dbf6c13ea7c21e803aa721437b691&auto=format&fit=crop&w=888&q=80",

          },

        ],

        showNumOfRemainingPhotos: true,

      },

    };

  },

};

```

## Contribution

Pull requests are welcomed.