Skip to content
Lightweight and simple image gallery component for Vue.js
Vue JavaScript
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build initial commit Apr 25, 2019
dist 1.1.1 - minor fix in data() and README Apr 29, 2019
images typo && demo gif Apr 25, 2019
src 1.1.1 - minor fix in data() and README Apr 29, 2019
.gitignore initial commit Apr 25, 2019
LICENSE Add LICENSE Apr 25, 2019
README.md updated README with example site list Apr 30, 2019
package-lock.json updated outdated packages Jul 23, 2019
package.json updated outdated packages Jul 23, 2019

README.md

vue-image-box

Description

Lightweight and simple-ish image gallery component for Vue.js.

Images can also be cycled through using the left & right arrow keys, and closed with the escape key.

Demo Gif

Sites using vue-image-box

Installation

CDN

<script src="https://unpkg.com/vue-image-box"></script>

NPM

npm install vue-image-box

Usage

props to send

  • images
    • object array
    • Object Members: imageURL, thumbURL, caption
  • index
    • int
    • Value: set to null
  • bgcolor
    • string
    • Value: Any color (e.g. #000000, rgba(0, 0, 0, .8), hsla(0, 0%, 0%, .8), etc)

events available

  • v-on:close
    • Current image closed (clicked X or pressed ESC)
    • Recommended: Set index value (from data()) to null

Example

This component works by waiting for index to be populated with a non-null value and displaying the full-size image associated with that index. Images are constructed from the (images) object array and the click handler updates the value of index, triggering the display of the larger modal of the image.

Vue Template:

<template>
  <div>
    <img
      v-for="(image, idx) in images"
      :key="idx"
      :src="image.thumbUrl"
      @click="showImage(idx)"
      :alt="image.caption"
      :title="image.caption"
    />
    <ImageBox
      :images="images"
      :index="index"
      @close="index = null"
      :bgcolor="bgcolor"
    ></ImageBox>
  </div>
</template>
<script>
import ImageBox from "vue-image-box";

export default {
  name: "app",
  components: {
    ImageBox
  },
  methods: {
    showImage: function(idx) {
      this.index = idx;
    }
  },
  data() {
    return {
      index: null,
      bgcolor: "rgba(51, 51, 51, .9)",
      images: [
        {
          imageUrl: "https://placekitten.com/800/600",
          thumbUrl: "https://placekitten.com/800/600",
          caption: "kitten #1"
        },
        {
          imageUrl: "https://placekitten.com/825/600",
          thumbUrl: "https://placekitten.com/825/600",
          caption: "kitten #2"
        },
        {
          imageUrl: "https://placekitten.com/803/600",
          thumbUrl: "https://placekitten.com/803/600",
          caption: "kitten #3"
        }
      ]
    };
  }
};
</script>

Author

Adam Romig

License

vue-image-box is available under the MIT license. See the LICENSE file for details.

You can’t perform that action at this time.