3D spin with controls

The clean interface of Sirv Spin is achieved partly by the minimal use of user interface controls. The only button shown by default is the full-screen button in the top right.

Instead, you might want to show buttons for controlling the spin, for example:

Buttons can also be overlayed on the image instead of outside:


The 9 buttons underneath these 3D spins are PNG images. They are fully customizable and can look and feel exactly how you wish.

Design your own icons for a truly custom experience or use a pre-designed set of icons like the Flaticon images in the examples above.

How it was created

The buttons call the Sirv Spin API via a JavaScript callback. For example, the callback and button style for the full-screen button is:

<a onclick="Sirv.instance('spin-1').fullscreen('spin-1'); return false;" href="#" class="button flaticon-move26"></a>

The PNG image, its dimensions and other styles are set in an external CSS file, referenced with class.

Instead of images, you can use HTML buttons or text links. The code below will launch full-screen from a text link:

<a onclick="Sirv.instance('spin-1').fullscreen('spin-1'); return false;">Launch full-screen spin</a>

In the code above, spin-1 refers to the ID of the spin, which has been set in the div like so:

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

The complete code:

<div class="sirv-container overlay">
<div class="ihint spin-2"></div>
<div class="spin-container">
<div class="Sirv spin-dark-theme" id="spin-2" data-src="https://sirv.sirv.com/website/demos/green-car/green-car-2.spin?profile=green-car"></div>
</div>

<div class="sirv-controls">
<a onclick="updatePlayPause(false,'spin-2');Sirv.instance('spin-2').play(-1); return false;" href="#" class="button flaticon-keyboard54" title="Left"></a>
<a id="pause-button-spin-2" onclick="Sirv.instance('spin-2').pause(); updatePlayPause(false,'spin-2'); return false;" href="#" class="button flaticon-pause44" title="Pause"></a>
<a id="play-button-spin-2" onclick="Sirv.instance('spin-2').play(); updatePlayPause(true,'spin-2'); return false;" href="#" class="button flaticon-play106" title="Play"></a>
<a onclick="updatePlayPause(false,'spin-2');Sirv.instance('spin-2').play(1); return false;" href="#" class="button flaticon-keyboard53" title="Right"></a>
<a onclick="Sirv.instance('spin-2').jump(-1); return false;" href="#" class="button flaticon-expand39" title="Up"></a>
<a onclick="Sirv.instance('spin-2').jump(1); return false;" href="#" class="button flaticon-expand38" title="Down"></a>
<a onclick="Sirv.instance('spin-2').zoomIn(); return false;" href="#" class="button flaticon-round57" title="Zoom In"></a>
<a onclick="Sirv.instance('spin-2').zoomOut(); return false;" href="#" class="button flaticon-round56" title="Zoom Out"></a>
<a onclick="Sirv.instance('spin-2').fullscreen('spin-2'); return false;" href="#" class="button flaticon-move26" title="Full Screen"></a>
<a href="#" onclick="showCurrentFrame('spin-2'); return false;" class="button flaticon-round52" title="Info"></a>
<div class="clear"></div>
</div>
</div>

<script src="/wp-content/themes/sirv/js/sirv-controls.js"></script>

360 and 3D spins

This rotating car in the demos above is a 3D spin with button controls. It’s considered 3D because it has 4 rows and 20 columns – 80 photos in total. You can move the car up/down through 4 different axis.

Buttons can equally be applied to a 360 spin. 360 is the more common type of spin because it has one row only. Photographing a product on just one axis is easier and faster. 360 spins faster too because they typically have fewer frames in total.

Full creativity

The Sirv Spin API gives you creative freedom to design buttons and links to go anywhere on your page. Use it to provide rich user experiences, giving your visitors control over your animations in new ways.

If you’re custom designing an interface and would like professional assistance, please contact our team with your requirements and one of our product representatives will assist you.