1.0.9 • Published 26 days ago
@sirv/sirvjs-vue v1.0.9
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-vueregister 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*.viewfiles, overrides:slidesdata-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 Stringsrc- Source StringdataOptions- Local slide options Objecttype- Type of slide String. The available props are:spin,zoom,image,youtube,vimeo,video,model,htmldataThumbnailImage- Custom thumbnail image StringdataThumbnailHtml- Custom thumbnail html StringdataDisabled- Disable slide BooleandataSwipeDisabled- Disable slide swipe BooleandataHiddenSelector- Hide selector BooleandataPinned- Pinned selector String. The available props are:left,rightstaticImage- 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.