360 spin

On this page

About

The 360 spin module of Sirv Media viewer allows customers examine your products from every angle. It harnesses the full power of Sirv's dynamic imaging, allowing you to provide exceptional user experience for your customers.

Examples

Sirv Media Viewer can embed one 360 spin, many spins or a mixture of spins, images, zooms and videos.

Single 360 spin

The code is:

<div class="Sirv">
  <div data-src="https://demo.sirv.com/tshirt-aqua.spin"></div>
</div>

Multiple 360 spins

This gallery contains many spins, swappable by thumbnails underneath:

The code is:

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

Usage

It's easy to embed Sirv Media viewer in your page.

1. Paste this script anywhere in your HTML (typically before the </head> or </body> tag):

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

2. Add a div with the class "Sirv". Place each spin, image or video in its own div. The following example contains one spin, one zoomable image and one video. Thumbnails will be automatically generated, to swap between the 3 assets:

<div class="Sirv">
  <div data-src="https://demo.sirv.com/example.spin"></div>
  <div data-src="https://demo.sirv.com/example1.jpg" data-type="zoom"></div>
  <div data-src="https://demo.sirv.com/videos/e-tron_quattro.mp4"></div>
</div>

See examples of mixed assets on the Sirv Media Viewer page.

Options

Customize your spin with 30+ options.

Parameter Default Options Description
initialize load load, hover, click When to start downloading images.
inactivity 3000 numeric (ms) Wait time before spin considered inactive.
column.start 1 Frame number of first image shown on load.
column.loop true true, false Loop between first and last frame.
column.increment 1 numeric Number of frames to jump when spinning.
column.reverse false true, false Change direction of spin.
column.sensitivity 50 1-100 Speed of spin when dragging.
row.start 1 Number of first frame to show after load.
row.loop false true, false Loop after last frame to next row.
row.increment 1 numeric Number of frames to jump when spinning.
row.reverse false true, false Change direction of spin.
row.sensitivity 50 1-100 Speed of spin when dragging.
wheel false true, false Rotate spin with mousewheel.
swapSides false true, false Swap rows and columns.
Autospin
autospin.enable false true, false Continuously rotate the spin.
autospin.duration 3600 numeric (ms) Time to complete 1 full rotation.
autospin.type sphere sphere, row, full, helix Style of autospin animation, for multi-row spins.
Hint
hint.message.enable true true, false Show hint that image is interactive.
hint.message.text Drag to spin Text displayed in hint.
hint.onStart.enable true true, false Show hint once images have loaded.
hint.onStart.effect intro intro, twitch, spin, momentum, sphere, none Style of animation.
hint.onVisible.enable true true, false Show hint when spin becomes visible.
hint.onVisible.effect intro intro, twitch, spin, momentum, sphere, none Style of animation.
hint.onInactive.enable true true, false Show hint after period of inactivity.
hint.onInactive.effect intro intro, twitch, spin, momentum, sphere, none Style of animation.
Zoom
zoom.enable true true, false Allow zoom into image.
zoom.ratio 2.5 multiple Magnification level.
zoom.tiles true true, false Break zoomed image into tiles.
zoom.pan true true, false Pan the zoomed image on hover.

How to apply options

There are 2 ways to apply options - in the spins' div or in a script.

Options via div

Spin options can be applied in the div of the spin, with the data-options attribute. This example changes the inactivity period to 7000ms:

<div class="Sirv" data-options="fullscreen.enable:false;">
  <div data-src="https://demo.sirv.com/example.spin" data-options="inactivity:7000;"></div>
</div>

Options via script

Spin options can also be applied with JavaScript either within the page or in an external JS file. The following example changes the hint text, autospin and autospin speed:

<script>
  var SirvOptions = {
    viewer: {
      spin: {
        hint: {
          message: {
            text: 'Spin me!'
          }
        },
      autospin: {
        enable: true,
        duration: 6000
        }
      }
    }
  };
</script>

Initialize

Your spin will automatically load all its images when it enters the viewport - known as lazy loading. Before them, only the first image loads. This helps prevent a spin from loading images unnecessarily.

Alternatively, you can set initialize to either click or hover.

<div class="Sirv">
  <div data-src="https://demo.sirv.com/boot.spin" data-options="initialize:click"></div>
</div>

Load on click:

Load on hover:

Inactivity

Your spins will twitch every 3000ms (3 seconds) to indicate that they are interactive.

You can increase or decrease the inactivity period:

<div class="Sirv">
  <div data-src="https://demo.sirv.com/boot.spin" data-options="inactivity:7500"></div>
</div>

1500ms (1.5 seconds):

10000ms (10 seconds):

Increment

If your spin has a very large number of images, you may wish to load fewer images. It won't feel as smooth but it will use less data transfer.

Apply the column.increment parameter with a value of 2 to show every other frame, 3 to show every third frame and so on.

<div class="Sirv">
  <div data-src="https://demo.sirv.com/demo/chacos/chacos.spin" data-options="column.increment:4"></div>
</div>

Original (112 frames):

Column increment 4 (28 frames):

If you have a multi-row 3D spin, you can also change the row.increment.

First frame

The first image in your spin will show during and after load.

You can set a different first image with column.start. If you have a multi-row 3D spin, you can also change the row.start:

<div class="Sirv">
  <div data-src="https://demo.sirv.com/boot.spin" data-options="column.start:6; row.start:2"></div>
</div>

Column 7, row 1:

Column 8, row 2:

Column 11, row 3:

Loop

After the last frame, spins automatically loop back to the first frame.

You can stop looping, which is desireable if your spin does not end where it began. Set the column.loop parameter to false:

<div class="Sirv">
  <div data-src="https://demo.sirv.com/box.spin" data-options="column.loop:false"></div>
</div>

Loop disabled:

Multi-row spins do not loop by default, because they normally only have a few rows and don't complete a full vertical 360. To loop rows, set row.loop to true.

Reverse direction

The spin will rotate your frames in ascending order. Typically, spins feel most natural rotating in a clockwise direction. If your frames are numbered in the opposite direction, you can reverse this.

To swap the direction, set the column.reverse parameter to true:

<div class="Sirv">
  <div data-src="https://demo.sirv.com/box.spin" data-options="column.reverse:true"></div>
</div>

Original direction:

Reverse direction:

It's also possible to reverse the vertical direction of a multi-row 3D spin by setting row.reverse to true.

Sensitivity

The speed at which the spin rotates on drag is determined by the column.sensitivity and column.sensitivity parameters. They are set to 50 by default, on a scale of 0-100. A lower value reacts more slowly and a higher value more quickly.

<div class="Sirv">
  <div data-src="https://demo.sirv.com/boot.spin" data-options="column.sensitivity:40; row.sensitivity:60"></div>
</div>

Low sensitivity, 30:

High sensitivity, 70:

Mousewheel spin

The mousewheel will rotate a 3D spin up and down. You can disable this by setting wheel to false:

<div class="Sirv">
  <div data-src="https://demo.sirv.com/boot.spin" data-options="wheel:false"></div>
</div>
Mousewheel enabled:

Mousewheel disabled:

Hint

To help inform users that a spin is interactive, a 'hint' is shown. Hints are shown on load, when it comes into view and few seconds if the user doesn't interact with it.

Hint effect

There are 6 effects to choose from by setting hint.onStart.effect, hint.onVisible.effect and/or hint.onInactive.effect:

  • intro - 1 full spin row, then left and right (default).
  • twitch - slight movement up, down, left and right.
  • spin - 1 full spin row.
  • momentum - 1 fast spin row.
  • sphere - 1 full spin row, then 1 full column.
  • none - no movement
Intro:

Twitch:

Spin:

Momentum:

Sphere:

None:

For example, apply the momentum effect like so:

<div class="Sirv">
  <div data-src="https://demo.sirv.com/boot.spin" data-options="hint.onStart.effect:momentum"></div>
</div>

Hint message

The default text shown on the spin is "Drag to spin". Change this by applying the hint.message.text, for example:

<div class="Sirv">
  <div data-src="https://demo.sirv.com/boot.spin" data-options="hint.message.text:Here is some text"></div>
</div>

Autospin

Autospin can continually rotate the spin until the user interacts with it. It will restart after the user stops interacting with it.

To enable autospin, set autospin.enable to true:

<div class="Sirv">
  <div data-src="https://demo.sirv.com/boot.spin" data-options="autospin.enable:true;"></div>
</div>

Autospin speed

The default duration of one rotation is 3600ms. You can reduce this to speed up the spin or increase it to slow it down.

This spin completes each rotation in 1.5 seconds (1500ms):

<div class="Sirv">
  <div data-src="https://demo.sirv.com/boot.spin" data-options="autospin.enable:true; autospin.duration:1500"></div>
</div>

Autospin type

If you have a multi-row spin, you can use autospin.type to choose between 4 different rotation styles:

  • sphere - rotate 1 row then up and down (default style).
  • row - rotate 1 row.
  • full - rotate all rows.
<div class="Sirv">
  <div data-src="https://demo.sirv.com/boot.spin" data-options="autospin.enable:true; autospin.type:full"></div>
</div>

Sphere:

Row:

Full:

Autospin speed

The default duration of one rotation is 3600ms. You can reduce this to speed up the spin or increase it to slow it down.

<div class="Sirv">
  <div data-src="https://demo.sirv.com/boot.spin" data-options="autospin.enable:true; autospin.duration:1500"></div>
</div>

Duration 1500ms (1.5 seconds):

Zoom

Users can click any frame to zoom in.

Zoom can be disabled by setting zoom.enable to false:

<div class="Sirv">
  <div data-src="https://demo.sirv.com/boot.spin" data-options="zoom.enable:false"></div>
</div>

The magnification level of the zoom is 2.5 times larger than the main image. This can be increased/decreased to show more/less detail with the zoom.ratio. This would increase the zoom to 4.0 times magnification::

<div class="Sirv">
  <div data-src="https://demo.sirv.com/boot.spin" data-options="zoom.ratio:4.0"></div>
</div>

The zoomed image is generated from small square tiles of the large image, to help the image load quickly. Instead, it is possible to load the zoom as one very large image with the zoom.tiles option:

<div class="Sirv">
  <div data-src="https://demo.sirv.com/boot.spin" data-options="zoom.tiles:false"></div>
</div>

The user can move around the zoomed image by panning their cursor/finger. This effect can be disabled by setting zoom.pan to false:

<div class="Sirv">
  <div data-src="https://demo.sirv.com/boot.spin" data-options="zoom.pan:false"></div>
</div>

Swap sides

In case your spin file names contain row and column sequences that are back-to-front, you can use the swapSides parameter to switch them around. Set the option to true.

Fullscreen

To go instantly to fullscreen, set fullscreen.always to true. This is one of 30+ viewer options that are described on the main documentation page.

<div class="Sirv" data-options="fullscreen.always:true">
  <div data-src="https://demo.sirv.com/boot.spin"></div>
</div>

Instant fullscreen:

Mobile settings

To set different settings for mobile devices, use one of three ways to apply options. The examples below change the spin hint message to "Tap then drag".

Use a script to apply the settings to all instances on a page:

<script>
  var SirvMobileOptions = {
    spin: {
      hint: {
        message: {
          text: 'Tap then drag'
        }
      }
    }
  };
</script>

Alternatively, apply inline settings to Sirv Media Viewer:

<div class="Sirv" data-mobile-options="spin.hint.message.text: Tap then drag"></div>

Or apply inline settings to a specific item inside the viewer:

<div class="Sirv">
    <div data-src="https://demo.sirv.com/example.spin" data-mobile-options="hint.message.text: Tap then drag"></div>
</div>

API

List of API functions:

{
    isInitialized: function () {},
    isReady: function () {},
    play: function (duration, effect) {},
    pause: function () {},
    rotate: function (x, y) {},
    rotateX: function (frames) {},
    rotateY: function (frames) {},
    jump: function (rows) {},
    jumpRows: function (frame) {},
    jumpCols: function (frame) {},
    zoomIn: function () {},
    zoomOut: function () {},
    isZoomed: function () {},
    currentFrame: function () {},
    getOptions: function () {}
}

Customize styling

Spin thumbnail design

The background color and opacity of thumbnail overlays can be controlled with CSS. The following CSS will apply a mid-grey color, with 56% opacity:

<style>
.smv-thumbnails .smv-selector[data-type="spin"]:before {
    background-color: rgba(128, 128, 128, 0.56);
}
</style>

The 360 spin thumbnail can use any SVG or PNG image of your own design. Sirv provides a range of predesigned icons to choose from:

Those icons are available in black or white, ordered from 1 to 12 e.g.

  • https://scripts.sirv.com/smv/v3/b7/graphics/icons/black/icon.spin.12.svg
  • https://scripts.sirv.com/smv/v3/b7/graphics/icons/white/icon.spin.12.svg

Alternatively, you could design your own square SVG (or PNG) icon and apply it with CSS, like so:

<style>
.smv-thumbnails .smv-selector[data-type="spin"]:before {
    background-image: url(https://youraccount.sirv.com/path/to/your/spin-icon.svg);
}
</style>

If you have a mixture of 360 (left/right motion) and 3D spins (left/right & up/down motion), you can show different thumbnails for different spins. Three icon types are possible, with CSS:

<style>
/* single-row spin */
.smv-thumbnails .smv-selector[data-type="spin"].spin-x:before {
    background-image: url(https://youraccount.sirv.com/path/to/normal-spin-icon.svg);
}

/*  single-column spin */
.smv-thumbnails .smv-selector[data-type="spin"].spin-y:before {
    background-image: url(https://youraccount.sirv.com/path/to/vertical-spin-icon.svg);
}

/* multidimensional spin */
.smv-thumbnails .smv-selector[data-type="spin"].spin-xy:before {
    background-image: url(https://youraccount.sirv.com/path/to/3D-spin-icon.svg);
}
</style>

Optimize CDN hit ratio

To optimize the speed of loading, the width of spin images are rounded up to the neearest 100px. For example, if the viewport is 376px wide, a 400px width image will be served by Sirv (and scaled to 376px in the browser).

Rounding helps achieve a high CDN hit ratio, so that your spins load as quickly as possible while avoiding excessively large images. The same is true of image zooms.

Was this article helpful?

Get help from a Sirv expert