https://github.com/asvrada/vue-image-wall

An interactive vue component that displays multiple images in a row
https://github.com/asvrada/vue-image-wall

front-end image vue

Last synced: 2 months ago
JSON representation

An interactive vue component that displays multiple images in a row

• Host: GitHub
• URL: https://github.com/asvrada/vue-image-wall
• Owner: asvrada
• License: mit
• Created: 2018-08-06T11:03:23.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2021-08-16T03:53:10.000Z (over 3 years ago)
• Last Synced: 2024-11-08T10:52:23.743Z (3 months ago)
• Topics: front-end, image, vue
• Language: Vue
• Homepage: https://www.npmjs.com/package/vue-image-wall
• Size: 5.37 MB
• Stars: 18
• Watchers: 1
• Forks: 1
• Open Issues: 11
• Metadata Files:
  • Readme: readme.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# vue image wall

[![Build Status](https://travis-ci.com/asvrada/vue-image-wall.svg?branch=master)](https://travis-ci.com/asvrada/vue-image-wall)

An interactive vue component that displays multiple images in a row.

By hovering mouse over one of the images, that image will expand in width.

[Demo](https://asvrada.github.io/rwby-imagewall-demo/) | [Demo Project](https://github.com/asvrada/rwby-imagewall-demo)

## Install

```

npm install vue-template-compiler --save-dev

npm install vue-image-wall

```

or

```

yarn add vue-template-compiler -D

yarn add vue-image-wall

```

## Usage

__FEATURES UNDER DEVELOPMENT__

1. Height is fixed to 250px, will be fixed

2. Will add ability to accept config (scale of image, animation duration, etc)

```

  


    

  


  import VueImageWall from 'vue-image-wall';

  export default {

    name: 'app',

    components: { VueImageWall },

    data: function () {

      return {

        images: [

          '/assets/0.jpg',

          '/assets/1.jpg',

          '/assets/2.jpg',

          '/assets/3.jpg',

          '/assets/4.jpg'

        ],

      };

    },

  };

```

| props | type | default value | note |

|-----|------|-------|------|

| link-images | `[String]` | (required) | Contains list of images that this component will display |

## How to Contribute

Any comment/issue/PR is welcome!

## TODO:

1. Add two interaction modes 

    1. macOS dock

## License

[MIT](https://opensource.org/licenses/MIT)