Vue.js image zoom

The Sirv Media Viewer component for Vue makes it easy to create stunning zoomable image galleries for ecommerce, art galleries, infographics and any other image you need to zoom into. Easily combine images with 360 product views, videos and 3D models to create stunning product galleries.

Demo

View on StackBlitz.

Getting started

1. Sign up and upload your images

Create a Sirv account to automatically start a free trial (no credit card required). Then upload your images.

2. Install Sirv npm package

Sirv's npm package will allow you to load Sirv JS and use the component in your app.

npm install @sirv/sirvjs-vue
#pnpm add @sirv/sirvjs-vue
#yarn add @sirv/sirvjs-vue

3. Register Sirv Media Viewer as a plugin

//main.js
import { createApp } from 'vue';
import App from './App.vue';
import SirvjsVue from '@sirv/sirvjs-vue';
const app = createApp(App);

app.use(SirvjsVue);
app.mount('#app');

Now you can use the Sirv Media Viewer component for gorgeous image zooms in your Vue app.

Usage

Loading Sirv JS

You can load the script the Sirv Media Viewer script in your HTML:

<script src="https://scripts.sirv.com/sirvjs/v3/sirv.js"></script>

If you need finer control, use the loadScript module:

import { loadScript } from '@sirv/sirvjs-vue';
loadScript().then((sirv) => {
    sirv.start();
})

Using the Sirv Media Viewer component

There are two ways to use the Sirv Media Viewer component in your Vue app.

Add your images to the slides array:

<sirv-media-viewer :slides="[
  'https://demo.sirv.com/demo/snug/unpacked.jpg',
  {
    src: 'https://demo.sirv.com/demo/snug/teal-b-throw.jpg',
    type: 'zoom',
    dataOptions: {
      mode: 'deep',
    },
  },

  {
    src: 'https://demo.sirv.com/demo/snug/teal-shadow.jpg',
    type: 'zoom',
    dataOptions: {
      mode: 'magnifier',
    },
  },
  {
    src: 'https://demo.sirv.com/demo/snug/teal-shadow.jpg',
    type: 'zoom',
    dataOptions: {
      mode: 'top',
    },
  },
]"></sirv-media-viewer>

The slides object accepts other props, which you can find below.

Use div options

Alternatively, you can use the component by adding each element of the gallery as a div, for example:

<sirv-media-viewer data-options="fullscreen.enable:false;">
  <div data-type="zoom" data-src="https://demo.sirv.com/demo/snug/unpacked.jpg"></div>
  <div data-type="zoom" data-src="https://demo.sirv.com/demo/snug/teal-shadow.jpg" data-options="mode: deep; map.enable: true;"></div>
</sirv-media-viewer>

You can apply data types and data options in the div itself. You can find all the options in the Sirv Media Viewer Image Zoom documentation.

Props

slides

• :id - viewer id
• :data-src - using for `*.view` files, overrides `:slides`
• data-options
• :slides - Array with slide sources. Sources can be String or Object.

A String accepts a URL such as https://demo.sirv.com/demo/snug/unpacked.jpg.

An Object has additional props:

• id - Slide id [String]
• src - Source [String]
• dataOptions - Local slide options [Object]
• type - Type of slide [String]. The available props are: `spin`, `zoom`, `image`, `model`, `youtube`, `vimeo`, `video`, `html`
• dataThumbnailImage - Custom thumbnail image [String]
• dataThumbnailHtml - Custom thumbnail html [String]
• dataDisabled - Disable slide [Boolean]
• dataSwipeDisabled - Disable slide swipe [Boolean]
• dataHiddenSelector - Hide selector [Boolean]
• dataPinned - Pinned selector [String]. The available props are: `left`, `right`
• staticImage - Static image [Boolean].

Events and API

Here's a sample component:

<template>
 <sirv-media-viewer
 :id="id"
 :slides="[
  'https://demo.sirv.com/demo/snug/unpacked.jpg',
  {
   src: 'https://demo.sirv.com/demo/snug/teal-b-throw.jpg',
   type: 'zoom',
   dataOptions: {
    mode: 'deep',
   },
  },
  {
   src: 'https://demo.sirv.com/demo/snug/teal-shadow.jpg',
   type: 'zoom',
   dataOptions: {
    mode: 'magnifier',
   },
  },
  {
   src: 'https://demo.sirv.com/demo/snug/teal-shadow.jpg',
   type: 'zoom',
   dataOptions: {
    mode: 'top',
   },
  },
 ]"
 ></sirv-media-viewer>
<div class="flex justify-center mt-5">
 <button class="btn mr-2" @click="prev">Previous</button>
 <button class="btn" @click="next">Next</button>
</div>
</template>
<script setup>
//import dependencies
import { onMounted, ref } from 'vue';
import { loadScript } from '@sirv/sirvjs-vue';
//define the viewer and methods
const viewer = ref(null);
const id = ref('smv-test');
const prev = () => {
 if (viewer.value) {
  viewer.value.prev();
 }
};

const next = () => {
 if (viewer.value) {
  viewer.value.next();
 }
};
//load Sirv JS after the app is mounted, start SMV and define the viewer
onMounted(() => {
 loadScript().then((sirv) => {
  sirv.start();
  sirv.on('viewer:ready', (e) => {
   if (e.id === 'smv-test') {
    viewer.value = e;
    console.log('viewer:ready', e);
   }
  });
 });
});
</script>

You can check the full list of API methods and Events.

Get help

If you need help with the Vue component for Sirv Media Viewer, please message the Sirv support team.