360 spin

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" data-src="https://demo.sirv.com/tshirt-aqua.spin"></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>

If you only need Sirv JS for 360 spins, you can use a smaller version of Sirv JS instead.

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.

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">
<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 speed:

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

Initialize

Your spin will automatically load all its images when it enters the viewport - known as lazy loading. Before then, 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>

<script>
var SirvOptions = {
  viewer: {
   spin: {
    initialize: 'click'
   }
 }
}
</script>

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>

<script>
var SirvOptions = {
  viewer: {
    spin: {
      inactivity: 7500
    }
  }
}
</script>

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>

<script>
var SirvOptions = {
  viewer: {
    spin: {
      column: {
        increment: 4
      }
    }
  }
}
</script>

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>

<script>
var SirvOptions = {
  viewer: {
    spin: {
      column: {
        start: 6
      },
      row: {
        start: 2
      }
    }
  }
}
</script>

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>

<script>
var SirvOptions = {
  viewer: {
    spin: {
      column: {
        loop: false
      }
    } 
  }
}
</script>

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>

<script>
var SirvOptions = {
  viewer: {
    spin: {
      column: {
        reverse: true
      }
    }
  }
}
</script>

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>

<script>
var SirvOptions = {
  viewer: {
    spin: {
      column: {
        sensitivity: 40,
      },
      row: {
        sensitivity: 60
      }
    }
  }
}
</script>

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>

<script>
var SirvOptions = {
  viewer: {
    spin: {
      wheel: false
    }
  }
}
</script>

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

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>

<script>
var SirvOptions = {
  viewer: {
    spin: {
      hint: {
        onStart: {
          effect: 'momentum'
        }
      }
    }
  }
}
</script>

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>

<script>
var SirvOptions = {
  viewer: {
    spin: {
      hint: {
        message: {
          text: 'Here is some text'
        }
      }
    }
  }
}
</script>

Autospin

Autospin can continually rotate the spin until the user interacts 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>

<script>
var SirvOptions = {
  viewer: {
    spin: {
      autospin: {
        enable: true
      }
    }
  }
}
</script>

Autospin resume

Autospin will restart 3 seconds after the user stops interacting with it. You can adjust this by setting the number of milliseconds (ms) in the autospin.resume option. This example sets it to instantly resume (after 0ms):

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

<script>
var SirvOptions = {
  viewer: {
    spin: {
      autospin: {
        enable: true,
        resume: 0
      }
    }
  }
}
</script>

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="spin.autospin.enable:true; spin.speed:1500"></div> 
</div>

<script>
var SirvOptions = {
  viewer: {
    spin: {
      autospin: {
        enable: true
      },
      speed: 1500
    }
  }
}
</script>

Autospin type

If you have a multi-row spin, you can use autospin.type to choose between 3 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>

<script>
var SirvOptions = {
  viewer: {
    spin: {
      autospin: {
        enable: true,
        type: 'full'
      }
    }
  }
}
</script>

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>

<script>
var SirvOptions = {
  viewer: {
    spin: {
      zoom: {
        enable: false
      }
    }
  }
}
</script>

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>

<script>
var SirvOptions = {
  viewer: {
    spin: {
      zoom: {
        ratio: 4.0
      }
    }
  }
}
</script>

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>

<script>
var SirvOptions = {
  viewer: {
    spin: {
      zoom: {
        tiles: false
      }
    }
  }
}
</script> 

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>

<script>
var SirvOptions = {
  viewer: {
    spin: {
      zoom: {
        pan: false
      }
    }
  }
}
</script>

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

Fullscreen is initiated by double-clicking the spin or clicking the fullscreen icon in the top right. On mobile, you can also pinch out to trigger fullscreen.

To trigger fullscreen in one click, 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>

<script>
var SirvOptions = {
  viewer: {
    spin: {
      fullscreen: {
        always: true
      }
    }
  }
}
</script>

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/sirvjs/v3/graphics/icons/black/icon.spin.12.svg
• https://scripts.sirv.com/sirvjs/v3/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>

Spin hint design

Use CSS to customize the spin hint to perfectly fit your website design. Change the hint position; background colour; border style; text font size & colour, like so:

<style>
/* spin hint position */
.sirv-hint {
    top: auto;
    bottom: 0;
}

/* spin hint text and box colour */
.sirv-hint-message {
    background-color: rgba(255, 255, 255, .8);
    border: 3px solid #de0ced;
    color: #de0ced;
    font-size: 20px; 
}
</style>

Placeholder

It is possible to display a placeholder image until a spin has initialized. By default, if a spin is set to initialize on click, the first image of the spin will be shown. It's possible to choose any image that you wish, with some HTML and CSS.

Example:

<div class="Sirv" data-src="https://demo.sirv.com/example.spin">
 <img class="cover-image" src="https://demo.sirv.com/example.jpg?w=400">
</div>
<style>
.Sirv { 
 position: relative; 
}
.Sirv .cover-image {
 position: absolute;
 top: 0;
 right: 0;
 bottom: 0;
 left: 0;
 margin: auto;
 pointer-events: none;
 cursor: pointer;
}
</style>

Iframe

In case you cannot add a 360 spin to your page using a <div>, you can try using an <iframe> instead.

There are some notable disadvantages of iframes: the spin will stop rotating if the user drags beyond the edge of the iframe; the browser may not permit fullscreen and; scrollbars might appear beside the spin. Otherwise, iframes can be an effective workaround when divs are not possible.

Embed an iframe like so (where 400 is the px height):

<iframe src="https://demo.sirv.com/drill/drill.spin" max-height="400" frameborder="0" allowfullscreen></iframe>

Optimize CDN hit ratio

To optimize the speed of loading, the width of spin images are rounded up to the nearest 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.