API

Use the API for advanced control over the images, spins and videos in Sirv Media Viewer.

Global API

Example code:

<script>
// 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);
});
</script>

Viewer API

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>

Example script to show/hide items in a gallery:

<script>
  // Hide items in the "color-navy" group
  Sirv.getInstance('#example-viewer-1').disableGroup('color-navy');
  
  // Show items from the "color-brown" and "size-m" groups
  Sirv.getInstance('#example-viewer-1').enableGroup(['color-brown', 'size-m']);
  
  // Show items from the "color-yellow" group and hide all other items
  Sirv.getInstance('#example-viewer-1').switchGroup('color-yellow');
</script>

Spin API

Example script to rotate the spin:

<script>
// Check if Spin component spin is initialized:
Sirv.getInstance('#my-viewer-id').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-id').child(2).spin.play(3600, 'row');
</script>

Zoom API

Example code:

<script>
// 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();
</script>

Video API

Example code:

<script>
// Check if Video component is ready:
Sirv.viewer.getInstance('#my-viewer').child('video-item').video.isReady();
</script>

Model API

Each material in the model has a number, with the first material being number 0.

Material instance API

Example code:

<script>
// Set color of one material and metallic factor of another material:
const model = Sirv.viewer.getInstance('#my-viewer').child('model-item').model;
model.getMaterial(0).setColor('#abf0c4');
model.getMaterial(2).setMetallicFactor(0.74);
</script>

Image API

Example code:

<script>
// 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();
</script>

Lazy image API

Example code:

<script>
// Check if Lazy Image is ready:
Sirv.lazyimage.getInstance('#my-lazy-image').isReady();

// Force image resize:
Sirv.lazyimage.getInstance('#my-lazy-image').resize();
</script>

Hotspots API

Example code to hide hotspots in fullscreen:

<script>
const disableHotspots = (hotspotsApi) => {
  hotspotsApi.list().forEach((node, index) => hotspotsApi.disable(index));
};

const enableHotspots = (hotspotsApi) => {
  hotspotsApi.list().forEach((node, index) => hotspotsApi.enable(index));
};

Sirv.on('viewer:fullscreenIn', (e) => {
  e.items().forEach(item => {
    const componentApi = item[item.component];
    if (componentApi.hotspots && componentApi.isReady()) {
      disableHotspots(componentApi.hotspots);
    }
  });
});

Sirv.on('viewer:fullscreenOut', (e) => {
  e.items().forEach(item => {
    const componentApi = item[item.component];
    if (componentApi.hotspots && componentApi.isReady()) {
      enableHotspots(componentApi.hotspots);
    }
  });
});

Sirv.on('spin:ready', (e) => {
  if (e.parent().parent().isFullscreen() && e.hotspots) {
    disableHotspots(e.hotspots);
  }
});
</script>