API
On this page
Use the API for advanced control over the images, spins and videos in Sirv Media Viewer.
Global API
| Method | Parameters | Description |
|---|---|---|
| Sirv.start | (selector or element) | Starts Sirv instance(s) by DOM query selector, or by HTML element |
| Sirv.stop | (selector or element) | Stops Sirv instance(s) by DOM query selector, or by HTML element |
| Sirv.on | (event name) | Attach an event handler for Sirv event |
| Sirv.off | (event name) | Remove an event handler |
| Sirv.getInstance | (selector or element) | Get viewer or lazy image instance by DOM query selector, or by HTML element |
| Sirv.viewer.getInstance | (selector or element) | Get viewer instance by DOM query selector, or by HTML element |
| Sirv.lazyImage.getInstance | (selector or element) | Get lazy image instance by DOM query selector, or by HTML element |
Example code:
// Start all Sirv instances on the page:
Sirv.start();
// Start Sirv instances that match the provided selector:
Sirv.start('.product-view .Sirv');
// Attach event handler
Sirv.on('viewer:beforeSlideIn', (nextItem) => {
console.log(nextItem);
});
Viewer API
| Method | Parameters | Description |
|---|---|---|
| isReady | Check if a viewer instance is ready | |
| isFullscreen | Check if a viewer instance is in fullscreen | |
| fullscreen | Switch to full screen mode | |
| next | Switch to next item | |
| prev | Switch to previous item | |
| jump | (index or item id) | Switch to a particular item by index or by id (data-id) |
| play | (delay) | Start viewer autoplay. If the delay argument is passed, it will override the slide.delay setting. |
| pause | Pause viewer autoplay | |
| items | (filters) | Get viewer items. Filters: { enabled: true } - only enabled items; { enabled: false } - only disabled items. |
| itemsCount | (filters) | Get the number of viewer items. Filters: { enabled: true } - only enabled items; { enabled: false } - only disabled items. |
| child | (index or item id) | Get reference to a particular item by index or by id (data-id) |
| enableItem | (index or item id) | Enable a particular item by index or by id (data-id) |
| disableItem | (index or item id) | Disable a particular item by index or by id (data-id) |
| insertItem | (DOM element, index) | Add item to the viewer at specified index. If index omitted, add item to the end. |
| removeItem | (index or item id) | Remove item from the viewer by index or by id (data-id) |
Example script to replace one gallery with another:
<script>
// Check if viewer with `id="my-viewer"` is ready:
Sirv.viewer.getInstance('#my-viewer').isReady();
// Switch to the next item:
Sirv.viewer.getInstance('#my-viewer').next();
// Disable (exclude) 4th item in the viewer:
Sirv.viewer.getInstance('#my-viewer').disableItem(3);
</script>
Example script to pause a slide on hover:
<script>
// Pause on entry:
document.querySelector('#slideshow').addEventListener('mouseenter', () => { Sirv.viewer.getInstance('#slideshow').pause(); });
// Play on exit:
document.querySelector('#slideshow').addEventListener('mouseleave', () => { Sirv.viewer.getInstance('#slideshow').play(); });
</script>
Spin API
| Method | Parameters | Description |
|---|---|---|
| isInitialized | Check if Spin instance is initialized | |
| isReady | Check if Spin instance is ready | |
| play | (duration, type) | Start auto-spin rotation |
| pause | Stop autospin | |
| rotate | (columns, [rows]) | Rotate by X number of frames on X-axis and/or Y-axis |
| rotateX | (frames) | Rotate by X number of frames on X-axis |
| rotateY | (frames) | Rotate by X number of frames on Y-axis |
| jumpRows | (row) | Jump to a specific row |
| jumpCols | (column) | Jump to a specific column |
| zoomIn | Zoom in to current frame | |
| zoomOut | Zoom out of current frame | |
| isZoomed | Check if the current frame is zoomed | |
| currentFrame | Get current frame: {rows: XX, cols: XX} |
Example code:
// Check if Spin component spin is initialized:
Sirv.getInstance('#my-viewer').child(2).spin.isInitialized();
// Check if Spin component is ready:
Sirv.getInstance('.product-view .Sirv').child('spin-item').spin.isReady();
// Start rotate of spin:
Sirv.getInstance('#my-viewer').child(2).spin.play(3600, 'row');
Zoom API
| Method | Parameters | Description |
|---|---|---|
| isReady | Check if Zoom instance ready | |
| isZoomed | Check if image is zoomed in | |
| zoomIn | Zoom in to image. | |
| zoomOut | Zoom out of image |
Example code:
// Check if component zoom is ready:
Sirv.getInstance('#my-viewer').child(3).zoom.isReady();
// Zoom in to image:
Sirv.getInstance('.product-view .Sirv').child('zoom-item').zoom.zoomIn();
Video API
| Method | Parameters | Description |
|---|---|---|
| isReady | Check if video instance is ready |
Example code:
// Check if Video component is ready:
Sirv.viewer.getInstance('#my-viewer').child('video-item').video.isReady();
Image API
| Method | Parameters | Description |
|---|---|---|
| isReady | Check if image instance is ready | |
| resize | Force image resize |
Example code:
// Check if Image component is ready:
Sirv.viewer.getInstance('#my-viewer').child('image-item').image.isReady();
// Force image resize:
Sirv.viewer.getInstance('#my-viewer').child(4).image.resize();
Lazy image API
| Method | Parameters | Description |
|---|---|---|
| isReady | Check if lazy image instance is ready | |
| resize | Force image resize |
Example code:
// Check if Lazy Image is ready:
Sirv.lazyimage.getInstance('#my-lazy-image').isReady();
// Force image resize:
Sirv.lazyimage.getInstance('#my-lazy-image').resize();
