Minimal Image Viewer With Zoom And Rotate Support – vue-previewer

Install & Download:

# Yarn
$ yarn add vue-image-previewer
# NPM
$ npm install vue-image-previewer --save

Description:

The Vue.js preview component that groups your images in a fullscreen gallery view and allows the visitor to switch between images with zoom, rotate, and fullscreen support.

How to use it:

1. Import and register the component.

import VuePreviewer from 'vue-image-previewer'

Vue.use(VuePreviewer);

// or
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="./dist/vue-image-previewer.js"></script>

2. Create a basic image viewer in your web app.

new Vue({
    el: '#app',
    components: { VuePreviewer: window.VuePreviewer },
    data() {
      return {
        options: {
          defaultWidth: '24%', 
          defaultHeight: '100px',
          // more previewer options here
        },
        style: {
          width: '50%',
          // more styles here
        },
        imgs: [
          '1.jpg',
          '2.jpg',
          "3.jpg",
          "4.jpg",
          // more images here
        ]
      }
    },
    template: `
      <vue-previewer :style="style" :images="imgs" mode="image" :options="options">
        <template v-slot:footer="{image}">{{image.name}}</template>
      </vue-previewer>`
})

3. All default options to config the image viewer.

Vue.use(VuePreviewer, {
  defaultWidth: '100px',
  defaultHeight: '75px',
  thumbnailStyle: {
    backgroundSize: 'cover'
  },
  keyMap: {
    zoomin: '+',
    zoomout: '-',
    rotate: 'r',
    prev: 'ArrowLeft',
    next: 'ArrowRight'
  }
})