Events

On this page

You can hook into the events below to track users and generate analytics that reveal how users are interacting with your images, spins and sliders.

List of events

Viewer events

Event Parameter Description
viewer:ready viewer Fires when slider instance is ready to operate
viewer:fullscreenIn viewer Fires when slider instance is ready to operate
viewer:fullscreenOut viewer Fires after exiting fullscreen
viewer:beforeSlideIn next item Fires before slide transition
viewer:beforeSlideOut current item Fires before slide transition
viewer:afterSlideIn current item Fires after slide transition
viewer:afterSlideOut item Fires after slide transition
viewer:enableItem item Fires when item is enabled
viewer:disableItem item Fires when item is disabled

Spin events

Event Parameter Description
spin:init spin Fires when spin instance is initialized
spin:ready spin Fires when spin instance is ready to operate
spin:zoomIn spin Fires when zoom mode activates
spin:zoomOut spin Fires when zoom mode deactivates
spin:rotate spin Fires when user rotates spin

Zoom events

Event Parameter Description
zoom:ready zoom Fires when zoom instance is ready to operate
zoom:zoomIn zoom Fires when zoom mode activates
zoom:zoomOut zoom Fires when zoom mode deactivates

Video events

Event Parameter Description
video:ready video Fires when video instance is ready to operate

Image events

Event Parameter Description
image:ready image Fires when image instance is ready to operate

Sirv API event binding

Attach and remove event handlers with the Sirv API using Sirv.on() and Sirv.off() methods.

function viewerEventHandler(viewer) {
  console.log('Sirv Viewer event happened.');
}

// Attach an event handler for a Viewer event
Sirv.on('viewer:ready', viewerEventHandler);

// Remove an event handler for a Viewer event
Sirv.off('viewer:ready', viewerEventHandler);


// Attach an event handler for a Spin event
Sirv.on('spin:zoomIn', (spin) => {
  console.log('Spin frame is zoomed in.');
});

// Attach an event handler for a Zoom event
Sirv.on('zoom:zoomOut', (zoom) => {
  console.log('Zoom image is zoomed out.');
});

In more detail:

<div class="Sirv" id="test">
  <div data-src="https://demo.sirv.com/tshirt-blue.spin"></div>
  <div data-src="https://demo.sirv.com/tshirt-green.spin"></div>
  <div data-src="https://demo.sirv.com/tshirt-red.spin"></div>
</div>

<script type="text/javascript" src="https://scripts.sirv.com/sirvjs/v3/sirv.js"></script>

<script type="text/javascript">
  Sirv.on('viewer:ready', (viewer) => {
    console.log('custom global event ready', viewer);
    if (viewer.id === 'test') {
      let child = viewer.child();
    }
  });
  Sirv.on('viewer:fullscreenIn', (viewer) => {
    console.log('custom global event fullscreenIn', viewer);
  });
  Sirv.on('viewer:fullscreenOut', (viewer) => {
    console.log('custom global event fullscreenOut', viewer);
  });
  Sirv.on('viewer:beforeSlideIn', (item) => {
    console.log('custom global event beforeSlideIn', item);
  });
  Sirv.on('viewer:beforeSlideOut', (item) => {
    console.log('custom global event beforeSlideOut', item);
  });
  Sirv.on('viewer:afterSlideIn', (item) => {
    console.log('custom global event afterSlideIn', item);
  });
  Sirv.on('viewer:afterSlideOut', (item) => {
    console.log('custom global event afterSlideOut', item);
  });
</script>

JavaScript event binding

Attach and remove event handlers with the standard DOM API by using the .addEventListener() and .removeEventListener() methods. Event names are namespaced with sirv:.

Attach an event handler for an event to a specific Sirv Media Viewer instance:

document.querySelector('.product-view .Sirv').addEventListener('sirv:viewer:beforeSlideIn', (e) => {
  console.log('Sirv Viewer event happened.', e.detail);
});

Attach an event handler for an event to a document element to watch events from all Sirv Media Viewer instances:

document.addEventListener('sirv:viewer:beforeSlideIn', (e) => {
});

jQuery event binding

Attach and remove event handlers with jQuery using its .on() and .off() methods. Event names are namespaced with sirv::

function eventHandler(e) {
  console.log('Sirv event happened.', e.detail);
}

Attach an event handler:

jQuery('.product-view .Sirv').on('sirv:viewer:beforeSlideIn', eventHandler);

Remove an event handler:

jQuery('.product-view .Sirv').off('sirv:viewer:beforeSlideIn', eventHandler);

Example event usage

Below shows the possible use of the spin:rotate event:

Sirv.on('spin:rotate', (spinInstance) => {

  /* Send a spin event to Google analytics */
  ga('event', {
    'Sirv',
	'Spin interaction',
	eventLabel: 'event.sirv.spin.interaction'
  });

  /* Send a custom spin event to Facebook */
  fbq('trackCustom', Sirv Spin Interaction');
});

Was this article helpful?

Get help from a Sirv expert