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 fullscreen button in the top right.
Instead, you can add all kinds of button configurations or form controls to control a spin.
Buttons under the spin
This example adds 9 buttons underneath a 3D spin. Click the buttons to interact with the spin:
<div class="sirv-container" style="min-height:226px">
<div class="ihint spin-1"></div>
<div class="spin-container">
<div class="Sirv spin-dark-theme" id="spin-1" data-src="https://sirv.sirv.com/website/demos/green-car/green-car.spin?profile=green-car"></div>
</div>
<div class="sirv-controls">
<a onclick="updatePlayPause(false,'#spin-1');Sirv.getInstance('#spin-1').child(0).spin.rotateX(-1); return false;" href="#" class="button flaticon-keyboard54" title="Left"></a>
<a id="pause-button-spin-1" onclick="Sirv.getInstance('#spin-1').child(0).spin.pause(); updatePlayPause(false,'#spin-1'); return false;" href="#" class="button flaticon-pause44" title="Pause"></a>
<a id="play-button-spin-1" onclick="Sirv.getInstance('#spin-1').child(0).spin.play(); updatePlayPause(true,'#spin-1'); return false;" href="#" class="button flaticon-play106" title="Play"></a>
<a onclick="updatePlayPause(false,'#spin-1');Sirv.getInstance('#spin-1').child(0).spin.rotateX(1); return false;" href="#" class="button flaticon-keyboard53" title="Right"></a>
<a onclick="Sirv.getInstance('#spin-1').child(0).spin.rotateY(-1); return false;" href="#" class="button flaticon-expand39" title="Up"></a>
<a onclick="Sirv.getInstance('#spin-1').child(0).spin.rotateY(1); return false;" href="#" class="button flaticon-expand38" title="Down"></a>
<a onclick="Sirv.getInstance('#spin-1').child(0).spin.zoomIn(); return false;" href="#" class="button flaticon-round57" title="Zoom In"></a>
<a onclick="Sirv.getInstance('#spin-1').child(0).spin.zoomOut(); return false;" href="#" class="button flaticon-round56" title="Zoom Out"></a>
<a onclick="Sirv.getInstance('#spin-1').fullscreen('spin-1'); return false;" href="#" class="button flaticon-move26" title="Full Screen"></a>
<a href="#" onclick="showCurrentFrame('#spin-1'); return false;" class="button flaticon-round52" title="Info"></a>
<div class="clear"></div>
</div>
</div>
<link rel="stylesheet" href="https://demo.sirv.com/sirv-controls/sirv-controls.css">
<script src="https://demo.sirv.com/sirv-controls/sirv-controls.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://scripts.sirv.com/sirvjs/v3/sirv.js"></script>
The button icons are PNG images with transparency, from the Flaticon icon set. Size and style is fully customizable. Choose between many popular icons sets or design your own, for a truly custom experience.
Each button uses a script to call the Sirv Spin API via a JavaScript callback. It’s easy to configure – click to view the code for each demo, to see how it was created.
Buttons on the spin
Buttons can be overlaid over the spin images, instead of below:
<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.getInstance('#spin-2').child(0).spin.rotateX(-1); return false;" href="#" class="button flaticon-keyboard54" title="Left"></a>
<a id="pause-button-spin-2" onclick="Sirv.getInstance('#spin-2').child(0).spin.pause(); updatePlayPause(false,'#spin-2'); return false;" href="#" class="button flaticon-pause44" title="Pause"></a>
<a id="play-button-spin-2" onclick="Sirv.getInstance('#spin-2').child(0).spin.play(); updatePlayPause(true,'#spin-2'); return false;" href="#" class="button flaticon-play106" title="Play"></a>
<a onclick="updatePlayPause(false,'#spin-2');Sirv.getInstance('#spin-2').child(0).spin.rotateX(1); return false;" href="#" class="button flaticon-keyboard53" title="Right"></a>
<a onclick="Sirv.getInstance('#spin-2').child(0).spin.rotateY(-1); return false;" href="#" class="button flaticon-expand39" title="Up"></a>
<a onclick="Sirv.getInstance('#spin-2').child(0).spin.rotateY(1); return false;" href="#" class="button flaticon-expand38" title="Down"></a>
<a onclick="Sirv.getInstance('#spin-2').child(0).spin.zoomIn(); return false;" href="#" class="button flaticon-round57" title="Zoom In"></a>
<a onclick="Sirv.getInstance('#spin-2').child(0).spin.zoomOut(); return false;" href="#" class="button flaticon-round56" title="Zoom Out"></a>
<a onclick="Sirv.getInstance('#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>
<link rel="stylesheet" href="https://demo.sirv.com/sirv-controls/sirv-controls.css">
<script src="https://demo.sirv.com/sirv-controls/sirv-controls.js"></script>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://scripts.sirv.com/sirvjs/v3/sirv.js"></script>
Separate button/link
The API can be used to open spins in fullscreen via a link on your page.
<style>
.spin-hide {height:0;}
<style>
<div class="spin-container spin-hide">
<div class="Sirv spin-dark-theme" id="spin-3" data-src="https://demo.sirv.com/spins/test123/Duplo/duplo-zoo.spin"></div>
</div>
<a onclick="Sirv.getInstance('#spin-3').fullscreen(); return false;">Launch full-screen spin</a>
Expert help
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.
