Vue-js-sirv-viewer NPM

Vue.js Sirv Media Viewer

Deprecated please use new version

Easy to use, highly customizable Vue.js Sirv Media Viewer library.

Copy and paste this script anywhere in your HTML, usually before </head>

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

or you can use npm module

install

npm install --save vue-js-sirv-viewer

register as plugin

import App from './App.vue'
import SirvMediaViewer from 'vue-js-sirv-viewer';

createApp(App)
    .use(SirvMediaViewer)
    .mount('#app');

basic usage

<sirv-media-viewer
    :id='...'
    :data-src='...'
    data-options="fullscreen.enable:false;"
    :slides="[
        'https://demo.sirv.com/demo/snug/teal-b-throw.jpg',
        'https://demo.sirv.com/demo/snug/teal.spin',
        {
            src: 'https://demo.sirv.com/demo/snug/unpacked.jpg',
            type: 'image'
        }
    ]"
></sirv-media-viewer>

:id - viewer id
:data-src - using for *.view files, overrides :slides
data-options - viewer options
:slides - Array with slide sources. Sources can be String or Object. String can be just url link 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, 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.