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 loadScript module
npm install --save @sirv/sirvjs-vue
import App from './App.vue'
import SirvjsVue from '@sirv/sirvjs-vue';
createApp(App)
.use(SirvjsVue)
.mount('#app');
<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
,model
,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].
-
Sirv Media Viewer documentation
<sirv-image
:id='...'
:data-src='...'
:data-bg-src="..."
data-options="..."
></sirv-image>
-
:id
- image id -
:data-bg-src
- using for background image src, overrides:data-src
-
:data-src
- using for image src -
data-options
- viewer options
This module adds Sirv Media Viewer script to page once.
import { loadScript } from '@sirv/sirvjs-vue';
loadScript().then((sirv) => {
// script is loaded
});
Append a <script>
node with 'https://scripts.sirv.com/sirvjs/v3/sirv.js'
URL to the <head>
element in the DOM.
More about it you can find here
More about it you can find here
Returns a promise which resolves to the sirv
object, or rejects with err
if any occurred.