Combine 360 spin, image zoom and video

Sirv can combine all kinds of images, to showcase your products in style.

Images are so highly optimized that your spins and zooms load extremely fast, allowing you to show an unlimited number of high-resolution images. Studies into sales conversion found that a wider range of product images, at higher quality, lead directly to higher conversions. Try some possible configurations below.

Spin, video & zoom

This demo shows a Sirv 360 spin, a YouTube video and 6 zoomable images with Sirv Zoom:


Spin, enlarge & video

This demo shows a Sirv 360 spin, a YouTube video and 6 zoomable images using Magic Zoom Plus:

Spin, static images & video

This demo shows a Sirv 360 spin, a YouTube video and 6 static images:

Spin & zoom

This demo shows a Sirv 360 spin and 6 zoomable images with Sirv Zoom:

 <script type="text/javascript" src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="//scripts.sirv.com/sirv.js"></script>
<script type="text/javascript" src="/link/to/your/file/magicscroll.js"></script>
<link href="/link/to/your/file/magicscroll.css" rel="stylesheet" type="text/css" media="screen"/>
/* Download Magic Scroll and upload folder /magicscroll/ to your server. */
<script type="text/javascript">
    var SirvOptions = { };
    SirvOptions.zoom = {
        onchange: function() {
        },
        onready: function(instance) {
            var img = document.createElement('img');
            img.src = 'https://img.youtube.com/vi/IBdjw5z_hxM/0.jpg';
            var thumb = instance.thumbnails.addItem(img);
            var thumbP = thumb.parentNode;
            thumbP.insertBefore(thumb, thumbP.firstChild);
            thumb.setAttribute('data-view', 'video');
            var img = document.createElement('img');
            img.src = 'https://demo.sirv.com/360icon.png?scale.width=75';
            var thumb = instance.thumbnails.addItem(img);
            var thumbP = thumb.parentNode;
            thumbP.insertBefore(thumb, thumbP.firstChild);
            thumb.setAttribute('data-view', 'spin');
            jQuery(instance.node).closest('.productWrapper').find( '.thumbs-box li' ).on( "click", function() {
                var view = jQuery(this).data('view');
                if (typeof view == 'undefined') {
                    view = 'zoom';
                };
                jQuery(this).closest('.productWrapper').find('div[data-view]').hide();
                jQuery(this).closest('.productWrapper').find('.thumbnails-wrapper li').removeClass('active');
                jQuery(this).addClass('active');
                jQuery(this).closest('.productWrapper').find('div[data-view="' + view + '"]').show();
                if (view == 'video') {
                    jQuery(this).closest('.productWrapper').find('div[data-view="' + view + '"]').css('display','flex')
                }
            });
            jQuery('#thumbs-box li[data-view="spin"]').on('click', function() {
                Sirv.instance('imgMain1').rotate(36,50000);
            });
            jQuery('#thumbs-box2 a[data-slide-id="spin"]').on('click', function() {
                Sirv.instance('imgMain2').rotate(36,50000);
            });
            jQuery('#thumbs-box3 a[data-slide-id="spin"]').on('click', function() {
                Sirv.instance('imgMain3').rotate(36,50000);
            });
            jQuery('#thumbs-box4 li[data-view="spin"]').on('click', function() {
                Sirv.instance('imgMain4').rotate(36,50000);
            });
            jQuery('li[data-view="spin"]').trigger('click');
        }
    };
</script>
<div class="productWrapper group">
    <div class="gallery-wrapper">
        <!-- Spin -->
        <div id="spin-box" data-view="spin" class="spin-box image-item image-item-visible" style="display:none">
            <div class="Sirv" data-src="//demo.sirv.com/spins/test123/Duplo/duplo-zoo.spin?autospin=off&hint=true" id="imgMain1"></div>
        </div>
            <!-- Video -->
            <div id="video-box" data-view="video" class="video-box image-item image-item-visible" style="display:none">
            <div class="video-wrapper">
                <iframe width="560" height="315" src="//www.youtube.com/embed/IBdjw5z_hxM" frameborder="0" allowfullscreen></iframe>
            </div>
        </div>
        <!-- Zooms -->
            <div id="zoom-box" data-view="zoom" class="zoom-box image-item">
            <div class="Sirv" id="zoom1" data-effect="zoom" data-options="thumbnails: #thumbs-box; square-thumbnails: false; fade: false;">
                <img data-src="//demo.sirv.com/spins/test123/Duplo/duplo-zoo-9.jpg" alt="" />
                <img data-src="//demo.sirv.com/spins/test123/Duplo/duplo-zoo-2.jpg" alt="" />
                <img data-src="//demo.sirv.com/spins/test123/Duplo/duplo-zoo-3.jpg" alt="" />
                <img data-src="//demo.sirv.com/spins/test123/Duplo/duplo-zoo-6.png" alt="" />
                <img data-src="//demo.sirv.com/spins/test123/Duplo/duplo-zoo-8.jpg" alt="" />
                <img data-src="//demo.sirv.com/spins/test123/Duplo/duplo-zoo-1.png" alt="" />
            </div>
        </div>
    </div>
    <!-- Thumbnails -->
    <div id="thumbs-box" class="thumbs-box"></div>
</div>
 <script type="text/javascript" src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="//scripts.sirv.com/sirv.js"></script>
<script type="text/javascript" src="/link/to/your/file/magicscroll.js"></script>
<link href="/link/to/your/file/magicscroll.css" rel="stylesheet" type="text/css" media="screen"/>
/* Download Magic Scroll and upload folder /magicscroll/ to your server. */
<script>
jQuery(document).ready(function(){
    jQuery('.zoom-gallery .selectors a').on('click touch', function(e) {
        var iframe = jQuery(this).closest('.zoom-gallery').find('.active iframe[src*="youtube"],.active iframe[src*="vimeo"]');
        if (iframe.length) {
            iframe.attr('src',iframe.attr('src'));
        }
        jQuery(this).closest('.zoom-gallery').find('.zoom-gallery-slide').removeClass('active');
        jQuery(this).closest('.zoom-gallery').find('.selectors a').removeClass('active');
        jQuery(this).closest('.zoom-gallery').find('.zoom-gallery-slide[data-slide-id="'+jQuery(this).attr('data-slide-id')+'"]').addClass('active');
        jQuery(this).addClass('active');
        e.preventDefault();
    });
});
</script>
<style type="text/css">
    .zoom-gallery {
        text-align: center;
    }
    .zoom-gallery-slide {
        display: none;
    }
    .zoom-gallery-slide.active {
        display: block;
    }
    .zoom-gallery .video-slide {
        position:relative;
        padding-bottom:56.25%;
        height:0;
        overflow:hidden;
    }
    .zoom-gallery .video-slide iframe,
    .zoom-gallery .video-slide object,
    .zoom-gallery .video-slide embed {
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
    }
    .zoom-gallery .selectors {
        text-align: center;
         margin:10px 0;
    }
    .zoom-gallery .selectors a {
        margin:0 5px;
        border:1px solid transparent;
        display: inline-block;
        cursor:pointer;
    }
    .zoom-gallery .selectors a:hover,
    .zoom-gallery .selectors a.active {
        border-color: #ccc;
    }
    .zoom-gallery .selectors img {
        box-shadow: none !important;
        filter:none !important;
        -webkit-filter: none !important;
    }
    .zoom-gallery .selectors a[data-slide-id=video-1],
    .zoom-gallery .selectors a[data-slide-id=video-2] {
        position: relative;
    }
    .zoom-gallery .selectors a[data-slide-id=video-1] img,
    .zoom-gallery .selectors a[data-slide-id=video-2] img {
        opacity: 0.8;
    }
    .zoom-gallery .selectors a span {
        position: absolute;
        color:#fff;
        text-shadow: 0px 1px 10px #000;
        top:50%;
        left:50%;
        display: inline-block;
        transform:translateY(-50%) translateX(-50%);
        -webkit-transform:translateY(-50%) translateX(-50%);
        font-size:30px;
        z-index: 100;
    }
    body > .mz-zoom-window {width: 600px !important; height: 360px !important}
</style>
<div class="zoom-gallery" style="max-width: 360px;">
    <div data-slide-id="spin" class="zoom-gallery-slide spin-box active">
        <div class="Sirv" style="max-width: 190px; margin: 0 auto" data-src="//demo.sirv.com/spins/test123/Duplo/duplo-zoo.spin?autospin=off&hint=true" id="imgMain2"></div>
    </div>
    <div data-slide-id="video" class="zoom-gallery-slide video-slide">
        <iframe src="//www.youtube.com/embed/IBdjw5z_hxM" frameborder="0" allowfullscreen></iframe>
    </div>
    <div data-slide-id="zoom" class="zoom-gallery-slide">
        <a href="https://demo.sirv.com/spins/test123/Duplo/duplo-zoo-9.jpg" class="MagicZoom" id="zoom-sev">
            <img src="//demo.sirv.com/spins/test123/Duplo/duplo-zoo-9.jpg?scale.height=360"/>
        </a>
    </div>
    <div id="thumbs-box2" class="selectors MagicScroll" data-options="height: 75; width: 100%; items: 4; step: 3; loop: off">
        <a data-slide-id="spin" class="active" href="#"><img data-src="//demo.sirv.com/360icon.png?scale.width=75" src="//demo.sirv.com/360icon.png?scale.width=75" alt=""></a>
        <a data-slide-id="video" href="#"><span class="glyphicon glyphicon-play"></span><img src="//img.youtube.com/vi/IBdjw5z_hxM/0.jpg" style="height:75px;" /></a>
        <a data-slide-id="zoom" href="https://demo.sirv.com/spins/test123/Duplo/duplo-zoo-9.jpg" data-image="https://demo.sirv.com/spins/test123/Duplo/duplo-zoo-9.jpg?scale.height=360" data-zoom-id="zoom-sev"><img src="//demo.sirv.com/spins/test123/Duplo/duplo-zoo-9.jpg?scale.height=75"/></a>
        <a data-slide-id="zoom" href="https://demo.sirv.com/spins/test123/Duplo/duplo-zoo-2.jpg" data-image="https://demo.sirv.com/spins/test123/Duplo/duplo-zoo-2.jpg?scale.height=360" data-zoom-id="zoom-sev"><img src="//demo.sirv.com/spins/test123/Duplo/duplo-zoo-2.jpg?scale.height=75"/></a>
        <a data-slide-id="zoom" href="https://demo.sirv.com/spins/test123/Duplo/duplo-zoo-3.jpg" data-image="https://demo.sirv.com/spins/test123/Duplo/duplo-zoo-3.jpg?scale.height=360" data-zoom-id="zoom-sev"><img src="//demo.sirv.com/spins/test123/Duplo/duplo-zoo-3.jpg?scale.height=75"/></a>
        <a data-slide-id="zoom" href="https://demo.sirv.com/spins/test123/Duplo/duplo-zoo-6.png" data-image="https://demo.sirv.com/spins/test123/Duplo/duplo-zoo-6.png?scale.height=360" data-zoom-id="zoom-sev"><img src="//demo.sirv.com/spins/test123/Duplo/duplo-zoo-6.png?scale.height=75"/></a>
        <a data-slide-id="zoom" href="https://demo.sirv.com/spins/test123/Duplo/duplo-zoo-8.jpg" data-image="https://demo.sirv.com/spins/test123/Duplo/duplo-zoo-8.jpg?scale.height=360" data-zoom-id="zoom-sev"><img src="//demo.sirv.com/spins/test123/Duplo/duplo-zoo-8.jpg?scale.height=75"/></a>
        <a data-slide-id="zoom" href="https://demo.sirv.com/spins/test123/Duplo/duplo-zoo-1.png" data-image="https://demo.sirv.com/spins/test123/Duplo/duplo-zoo-1.png?scale.height=360" data-zoom-id="zoom-sev"><img src="//demo.sirv.com/spins/test123/Duplo/duplo-zoo-1.png?scale.height=75"/></a>
    </div>
</div>
 <script type="text/javascript" src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="//scripts.sirv.com/sirv.js"></script>
<script type="text/javascript" src="/link/to/your/file/magicscroll.js"></script>
<link href="/link/to/your/file/magicscroll.css" rel="stylesheet" type="text/css" media="screen"/>
/* Download Magic Scroll and upload folder /magicscroll/ to your server. */
<script>
jQuery(document).ready(function(){
    jQuery('.zoom-gallery .selectors a').on('click touch', function(e) {
        var iframe = jQuery(this).closest('.zoom-gallery').find('.active iframe[src*="youtube"],.active iframe[src*="vimeo"]');
        if (iframe.length) {
            iframe.attr('src',iframe.attr('src'));
        }
        jQuery(this).closest('.zoom-gallery').find('.zoom-gallery-slide').removeClass('active');
        jQuery(this).closest('.zoom-gallery').find('.selectors a').removeClass('active');
        jQuery(this).closest('.zoom-gallery').find('.zoom-gallery-slide[data-slide-id="'+jQuery(this).attr('data-slide-id')+'"]').addClass('active');
        jQuery(this).addClass('active');
        e.preventDefault();
    });
});
</script>
<style type="text/css">
    .zoom-gallery {
        text-align: center;
    }
    .zoom-gallery-slide {
        display: none;
    }
    .zoom-gallery-slide.active {
        display: block;
    }
    .zoom-gallery .video-slide {
        position:relative;
        padding-bottom:56.25%;
        height:0;
        overflow:hidden;
    }
    .zoom-gallery .video-slide iframe,
    .zoom-gallery .video-slide object,
    .zoom-gallery .video-slide embed {
        position:absolute;
        top:0;
        left:0;
        width:100%;
        height:100%;
    }
    .zoom-gallery .selectors {
        text-align: center;
         margin:10px 0;
    }
    .zoom-gallery .selectors a {
        margin:0 5px;
        border:1px solid transparent;
        display: inline-block;
        cursor:pointer;
    }
    .zoom-gallery .selectors a:hover,
    .zoom-gallery .selectors a.active {
        border-color: #ccc;
    }
    .zoom-gallery .selectors img {
        box-shadow: none !important;
        filter:none !important;
        -webkit-filter: none !important;
    }
    .zoom-gallery .selectors a[data-slide-id=video-1],
    .zoom-gallery .selectors a[data-slide-id=video-2] {
        position: relative;
    }
    .zoom-gallery .selectors a[data-slide-id=video-1] img,
    .zoom-gallery .selectors a[data-slide-id=video-2] img {
        opacity: 0.8;
    }
    .zoom-gallery .selectors a span {
        position: absolute;
        color:#fff;
        text-shadow: 0px 1px 10px #000;
        top:50%;
        left:50%;
        display: inline-block;
        transform:translateY(-50%) translateX(-50%);
        -webkit-transform:translateY(-50%) translateX(-50%);
        font-size:30px;
        z-index: 100;
    }
    body > .mz-zoom-window {width: 600px !important; height: 360px !important}
</style>
<div class="zoom-gallery" style="max-width: 360px;">
    <div data-slide-id="spin" class="zoom-gallery-slide spin-box active">
        <div class="Sirv" style="max-width: 190px; margin: 0 auto" data-src="//demo.sirv.com/spins/test123/Duplo/duplo-zoo.spin?autospin=off&hint=true" id="imgMain3"></div>
    </div>
    <div data-slide-id="video" class="zoom-gallery-slide video-slide">
        <iframe src="//www.youtube.com/embed/IBdjw5z_hxM" frameborder="0" allowfullscreen></iframe>
    </div>
    <div data-slide-id="image-9" class="zoom-gallery-slide">
        <img src="//demo.sirv.com/spins/test123/Duplo/duplo-zoo-9.jpg?scale.height=360"/>
    </div>
    <div data-slide-id="image-2" class="zoom-gallery-slide">
        <img src="//demo.sirv.com/spins/test123/Duplo/duplo-zoo-2.jpg?scale.height=360"/>
    </div>
    <div data-slide-id="image-3" class="zoom-gallery-slide">
        <img src="//demo.sirv.com/spins/test123/Duplo/duplo-zoo-3.jpg?scale.height=360"/>
    </div>
    <div data-slide-id="image-6" class="zoom-gallery-slide">
        <img src="//demo.sirv.com/spins/test123/Duplo/duplo-zoo-6.png?scale.height=360"/>
    </div>
    <div data-slide-id="image-8" class="zoom-gallery-slide">
        <img src="//demo.sirv.com/spins/test123/Duplo/duplo-zoo-8.jpg?scale.height=360"/>
    </div>
    <div data-slide-id="image-1" class="zoom-gallery-slide">
        <img src="//demo.sirv.com/spins/test123/Duplo/duplo-zoo-1.png?scale.height=360"/>
    </div>
    <div id="thumbs-box3" class="selectors MagicScroll" data-options="height: 75; width: 100%; items: 4; step: 3; loop: off">
        <a data-slide-id="spin" class="active" href="#"><img data-src="//demo.sirv.com/360icon.png?scale.width=75" src="//demo.sirv.com/360icon.png?scale.width=75" alt=""></a>
        <a data-slide-id="video" href="#"><span class="glyphicon glyphicon-play"></span><img src="//img.youtube.com/vi/IBdjw5z_hxM/0.jpg" style="height:75px;" /></a>
        <a data-slide-id="image-9"><img src="//demo.sirv.com/spins/test123/Duplo/duplo-zoo-9.jpg?scale.height=75"/></a>
        <a data-slide-id="image-2"><img src="//demo.sirv.com/spins/test123/Duplo/duplo-zoo-2.jpg?scale.height=75"/></a>
        <a data-slide-id="image-3"><img src="//demo.sirv.com/spins/test123/Duplo/duplo-zoo-3.jpg?scale.height=75"/></a>
        <a data-slide-id="image-6"><img src="//demo.sirv.com/spins/test123/Duplo/duplo-zoo-6.png?scale.height=75"/></a>
        <a data-slide-id="image-8"><img src="//demo.sirv.com/spins/test123/Duplo/duplo-zoo-8.jpg?scale.height=75"/></a>
        <a data-slide-id="image-1"><img src="//demo.sirv.com/spins/test123/Duplo/duplo-zoo-1.png?scale.height=75"/></a>
    </div>
</div>
 <script type="text/javascript" src="//code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="//scripts.sirv.com/sirv.js"></script>
<script type="text/javascript" src="/link/to/your/file/magicscroll.js"></script>
<link href="/link/to/your/file/magicscroll.css" rel="stylesheet" type="text/css" media="screen"/>
/* Download Magic Scroll and upload folder /magicscroll/ to your server. */
<script type="text/javascript">
    var SirvOptions = { };
    SirvOptions.zoom = {
        onchange: function() {
        },
        onready: function(instance) {
            var img = document.createElement('img');
            img.src = 'https://demo.sirv.com/360icon.png?scale.width=75';
            var thumb = instance.thumbnails.addItem(img);
            var thumbP = thumb.parentNode;
            thumbP.insertBefore(thumb, thumbP.firstChild);
            thumb.setAttribute('data-view', 'spin');
            jQuery(instance.node).closest('.productWrapper').find( '.thumbs-box li' ).on( "click", function() {
                var view = jQuery(this).data('view');
                if (typeof view == 'undefined') {
                    view = 'zoom';
                };
                jQuery(this).closest('.productWrapper').find('div[data-view]').hide();
                jQuery(this).closest('.productWrapper').find('.thumbnails-wrapper li').removeClass('active');
                jQuery(this).addClass('active');
                jQuery(this).closest('.productWrapper').find('div[data-view="' + view + '"]').show();
                if (view == 'video') {
                    jQuery(this).closest('.productWrapper').find('div[data-view="' + view + '"]').css('display','flex')
                }
            });
            jQuery('#thumbs-box li[data-view="spin"]').on('click', function() {
                Sirv.instance('imgMain1').rotate(36,50000);
            });
            jQuery('#thumbs-box2 a[data-slide-id="spin"]').on('click', function() {
                Sirv.instance('imgMain2').rotate(36,50000);
            });
            jQuery('#thumbs-box3 a[data-slide-id="spin"]').on('click', function() {
                Sirv.instance('imgMain3').rotate(36,50000);
            });
            jQuery('#thumbs-box4 li[data-view="spin"]').on('click', function() {
                Sirv.instance('imgMain4').rotate(36,50000);
            });
            jQuery('li[data-view="spin"]').trigger('click');
            setTimeout(function(){jQuery('.thumbnails-wrapper ul').attr('style', 'transform: translate3d(0px, 0px, 0px);')}, 2500);
        }
    };
</script>
<div class="productWrapper group">
    <div class="gallery-wrapper">
        <!-- Spin -->
        <div id="spin-box4" data-view="spin" class="spin-box image-item image-item-visible" style="display:none">
            <div class="Sirv" data-src="//demo.sirv.com/spins/test123/Duplo/duplo-zoo.spin?autospin=off&hint=true" id="imgMain4">
        </div>
        <!-- Zooms --><div id="zoom-box4" data-view="zoom" class="zoom-box image-item">
            <div class="Sirv" id="zoom4" data-effect="zoom" data-options="thumbnails: #thumbs-box4; square-thumbnails: false; fade: false;">
                <img data-src="//demo.sirv.com/spins/test123/Duplo/duplo-zoo-9.jpg" alt="" />
                <img data-src="//demo.sirv.com/spins/test123/Duplo/duplo-zoo-2.jpg" alt="" />
                <img data-src="//demo.sirv.com/spins/test123/Duplo/duplo-zoo-3.jpg" alt="" />
                <img data-src="//demo.sirv.com/spins/test123/Duplo/duplo-zoo-6.png" alt="" />
                <img data-src="//demo.sirv.com/spins/test123/Duplo/duplo-zoo-8.jpg" alt="" />
                <img data-src="//demo.sirv.com/spins/test123/Duplo/duplo-zoo-1.png" alt="" />
            </div>
        </div>
    </div>
    <!-- Thumbnails -->
    <div id="thumbs-box4" class="thumbs-box">
</div>