@sirv/sirvjs-vue
v1.0.9
Published
Vue components for Sirv.js
Downloads
209
Readme
Vue components for Sirv.js
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
install
npm install --save @sirv/sirvjs-vue
register as plugin
import App from './App.vue'
import SirvjsVue from '@sirv/sirvjs-vue';
createApp(App)
.use(SirvjsVue)
.mount('#app');
Sirv Media Viewer
<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
Lazy image
<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 srcdata-options
- viewer options
loadScript module
This module adds Sirv Media Viewer script to page once.
usage
import { loadScript } from '@sirv/sirvjs-vue';
loadScript().then((sirv) => {
// script is loaded
});
API
promise = loadScript([attrs], [parentNode])
Append a <script>
node with 'https://scripts.sirv.com/sirvjs/v3/sirv.js'
URL to the <head>
element in the DOM.
attrs
(optional)
More about it you can find here
parentNode
(optional)
More about it you can find here
promise
Returns a promise which resolves to the sirv
object, or rejects with err
if any occurred.