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:

View the code
<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.instance('spin-1').play(-1); return false;" href="#" class="button flaticon-keyboard54" title="Left"></a>
        <a id="pause-button-spin-1" onclick="Sirv.instance('spin-1').pause(); updatePlayPause(false,'spin-1'); return false;" href="#" class="button flaticon-pause44" title="Pause"></a>
        <a id="play-button-spin-1" onclick="Sirv.instance('spin-1').play(); updatePlayPause(true,'spin-1'); return false;" href="#" class="button flaticon-play106" title="Play"></a>
        <a onclick="updatePlayPause(false,'spin-1');Sirv.instance('spin-1').play(1); return false;" href="#" class="button flaticon-keyboard53" title="Right"></a>
        <a onclick="Sirv.instance('spin-1').jump(-1); return false;" href="#" class="button flaticon-expand39" title="Up"></a>
        <a onclick="Sirv.instance('spin-1').jump(1); return false;" href="#" class="button flaticon-expand38" title="Down"></a>
        <a onclick="Sirv.instance('spin-1').zoomIn(); return false;" href="#" class="button flaticon-round57" title="Zoom In"></a>
        <a onclick="Sirv.instance('spin-1').zoomOut(); return false;" href="#" class="button flaticon-round56" title="Zoom Out"></a>
        <a onclick="Sirv.instance('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>

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:

View the 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>

 <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>

Separate button/link

The API can be used to open spins in fullscreen via a link on your page.

Launch full-screen spin

View the code
 <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.instance('spin-1').fullscreen('spin-1'); return false;">Launch full-screen spin</a>

Spin with a slider

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.

This example spins the image via a slider. Drag the slider backwards and forwards:

View the code
 /* Left side of slider */
.ui-widget-content {background: linear-gradient(to bottom,#fff 40%,#327bba 40%,#327bba 60%,#fff 60%)}
/* Right side of slider */
.ui-widget-header {background: linear-gradient(to bottom,#fff 40%,#999 40%,#666 60%,#fff 60%)}
/* Slider handler */
.ui-state-default {background: #999}
#rotator { margin:10px 0; } <script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://scripts.sirv.com/sirv.js"></script>
<script>
    (function($){
        $(document).ready(function(){
            frame = 0;
            $("#rotator").slider({
                range: "max",
                min: 1,
                max: 72, //Number of frames
                value: 1,
                slide: function( event, ui ) {
                    Sirv.instance('spin-rotator').play(ui.value - frame);
                    frame = ui.value;
                }
            });
        });
    })(jQuery);
</script>

 <div id="rotator"></div>
<div class="Sirv" id="spin-rotator" data-src="https://YOUR_SIRV_ACCOUNT.sirv.com/YOUR_FILE_NAME.spin?autospin=off"></div>

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.

Find a 360 product photography expert near you

Don’t have 360 product photography? We’ve launched a Sirv Experts directory with the best 360 product photography experts near you.