360°-tuotekuva (tuotekaruselli)

3d tuotekuva
sekä ominaisuuksia korostavat kuvat

360-asteen valokuva yhdistettynä lähi kuviin parhaimmalla laadulla ja yksityskohdilla tuo parhaimmalla laadulla ja yksityskohdilla tuo parhaimman kokemuksen käyttälälle. Se pitää vierailijan pidempään sivustolla ja tuottaa isomman mahdolisuuden ostokselle. Siten lisäämme myyntiä 7%-20%

All-in-one solution

Use this code snippet to add the combined 3d/non-3d image gallery to your online shop page (requires Jquery):

<style type="text/css">
    .productWrapper { display: block; width: 100%; position: relative; margin: 0 auto; }
    #spin-box,#spin-box-2 {
        display: none;
    }
    .spin-box, .zoom-box {
        min-height:378px;
    }
    .sirv-zoom-thumbnails .sirv-thumbnails ul li > img {
        max-width: 80px;
    }
    .fullscreen-mode .sirv-zoom-thumbnails .sirv-thumbnails .thumbnails-wrapper {
        overflow: hidden;
        text-align: center;
    }
    .fullscreen-mode .sirv-zoom-thumbnails .sirv-thumbnails ul { white-space: nowrap; }
    .fullscreen-mode .sirv-zoom-thumbnails .sirv-thumbnails ul li { margin: 0 4px; }
    .fullscreen-mode .sirv-zoom-thumbnails .sirv-thumbnails ul > li[data-view="spin"] {
        display: none;
    }
</style>
<script type="text/javascript">
    var SirvOptions = {};
    SirvOptions.zoom = {
        onready: function(instance) {
            var img = document.createElement('img');
            img.src = '//demo.sirv.com/support/68292/spin360-thumb.jpg';
            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 touchstart", function() {
                var isSpin = 'spin' == jQuery(this).data('view');
                if ( 'spin' == jQuery(this).data('view') ) {
                    showZoom360( false, true, this );
                } else {
                    showZoom360( true, false, this );
                }
            });
            /* remove this if you want the first steady image instead of spin: */
            thumb.click();
        }
    };
    function showZoom360(zoom, spin, elm) {
        jQuery(elm).closest('.productWrapper').find('.zoom-box')[0].style.display = (zoom) ? 'block' : 'none';
        jQuery(elm).closest('.productWrapper').find('.spin-box')[0].style.display = (spin) ? 'block' : 'none';
        return false;
    }
</script>