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
spin:rotateEnd spin Fires when spin stops rotating

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
video:play video Fires when video playback starts
video:pause video Fires when video playback is paused
video:resume video Fires when video playback resumes
video:end video Fires when playback reaches end of video
video:seek video Fires when a seek operation completes
video:fullscreenIn video Fires when video enters fullscreen mode
video:fullscreenOut video Fires when video leaves fullscreen mode

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');
});

Below shows two spins on a page, with different events applied per spin:

<div class="Sirv" id="viewer-id-1">
  <div data-id="spin-id-1" data-src="https://demo.sirv.com/boot.spin"></div>
</div>

<div class="Sirv" id="viewer-id-2">
  <div data-id="spin-id-2" data-src="https://demo.sirv.com/cap.spin"></div>
</div>

<script>
// first variant
Sirv.on('spin:ready', (spin) => {
    // const viewer = spin.parent().parent()
    // viewer.id === "viewer-id-1" || viewer.id === "viewer-id-2"
    // spin.id === "spin-id-1 || spin.id === "spin-id-2"
    display3dProductContent(spin);
});

Sirv.on('spin:rotate', (spin) => {
    // const viewer = spin.parent().parent()
    // viewer.id === "viewer-id-1" || viewer.id === "viewer-id-2"
    // spin.id === "spin-id-1 || spin.id === "spin-id-2"
    $('.slide-content').removeClass('show');
});

Sirv.on('spin:rotateEnd', (spin) => {
    // const viewer = spin.parent().parent();
    // viewer.id === "viewer-id-1" || viewer.id === "viewer-id-2"
    // spin.id === "spin-id-1 || spin.id === "spin-id-2"
    display3dProductContent(spin);
});

//second variant
document.querySelector("#viewer-id-2").addEventListener('sirv:spin:ready', (e) => {
    const spin = e.detail;
    // const viewer = spin.parent().parent();
    // viewer.id === "viewer-id-2"
    // spin.id === "spin-id-2"
});

document.querySelector("#viewer-id-2").addEventListener('sirv:spin:rotate', (e) => {
    const spin = e.detail;
    // const viewer = spin.parent().parent();
    // viewer.id === "viewer-id-2"
    // spin.id === "spin-id-2"
});

document.querySelector("#viewer-id-2").addEventListener('sirv:spin:rotateEnd', (e) => {
    const spin = e.detail;
    // const viewer = spin.parent().parent();
    // viewer.id === "viewer-id-2"
    // spin.id === "spin-id-2"
});
</script>

Event statistics

Sirv counts the views of your spins and shows the total on the Spin views page in your Sirv account. A "view" is counted each time the spin:ready event fires. The event fires once the images have downloaded and the spin is ready to interact with. Spins will lazy load by default, so the images will download only when the spin enters the viewport - if the spin is further down the page or if it is in a gallery and not shown on load, then no view will be counted until the user goes to the spin.

If the user navigates to another page and then comes back to the same page, another spin view will be counted (once the spin:ready event fires).

Was this article helpful?

Get help from a Sirv expert

help ukraine help ukraine Powered by Ukrainian determination and British ingenuity

How can you support Ukraine