vue-js-sirv-viewer
v1.1.1
Published
Sirv Media Viewer for Vue.js
Downloads
41
Maintainers
Readme
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].