FitViewer Developer Documentation

Advanced configuration

Introduction

FitViewer library permit you to custom your widget the best as possible.
To do this, you can configure:

Javascript configuration

Directive Detail
container DOM element or element id where the product has to be
height Height of the product
width Width of the product
language Application language
css Custom CSS file
zoommode Zoom mode (values: 'inner'|'magnifier'|'popup')
skunumber Default frame on load
hideelements Elements to hide on the player
transparent Get transparent image if available
showmessages Behavior when displaying messages (values: 'always'|'once'|'none')
onCallToActionClick Function called when callToAction element is clicked
autospin Automatic spin on loading (default: true)
spintime Spin animation time in millisecond (default: 4000)
* See JSDoc Reference for more details.

Interactive example

FitViewer = Fb.FitViewer.GetInstance(
    {
        FitViewer:
        {
            container: '#myFitViewer',
            width: 640,
            //height: 480,
            //css: '/yourPath/yourCustomCss.css',
            language: 'en',
            zoommode: 'inner',
            transparent: true,
            skunumber: $('#frames img:first').attr('rel'),
            hideelements:
            {
                photoprofil: false,
                photoface: false,
                photo360: false,
                options: false,
                buttons: false
            },
            showmessages: 'once',
            autospin: true,
            spintime: 4000
        }
    }
);
    
$('#frames img').click(
    function()
    {
        $('#frames img').removeClass('selected');
        $(this).addClass('selected');
        FitViewer.SetFrame($(this).attr('rel'));
    }
);

* See Interactive example live demo.

CSS custom file

Below, all the CSS directives used and customizable. The best way is to use a DOM Inspector (like Firebug).
#fittingbox-fitviewer
{
}

#fittingbox-fitviewer #fittingbox-fitviewer-logo
{
}

#fittingbox-fitviewer #fittingbox-fitviewer-title
{
}

#fittingbox-fitviewer ul,
#fittingbox-fitviewer li
{
}

#fittingbox-fitviewer #fittingbox-fitviewer-error
{
}

#fittingbox-fitviewer #fittingbox-fitviewer-error-title
{
}

#fittingbox-fitviewer #fittingbox-fitviewer-widget
{
}

#fittingbox-fitviewer #fittingbox-fitviewer-viewer
{
}

#fittingbox-fitviewer #fittingbox-fitviewer-viewer #fittingbox-fitviewer-profil,
#fittingbox-fitviewer #fittingbox-fitviewer-viewer #fittingbox-fitviewer-face,
#fittingbox-fitviewer #fittingbox-fitviewer-viewer #fittingbox-fitviewer-360
{
}

#fittingbox-fitviewer #fittingbox-fitviewer-viewer #fittingbox-fitviewer-profil img,
#fittingbox-fitviewer #fittingbox-fitviewer-viewer #fittingbox-fitviewer-face img
{
}

#fittingbox-fitviewer #fittingbox-fitviewer-viewer #fittingbox-fitviewer-360
{
}

#fittingbox-fitviewer #fittingbox-fitviewer-viewer #fittingbox-fitviewer-360.fittingbox-fitviewer-move
{
}

#fittingbox-fitviewer #fittingbox-fitviewer-viewer #fittingbox-fitviewer-buttons
{
}

#fittingbox-fitviewer #fittingbox-fitviewer-viewer #fittingbox-fitviewer-buttons > div
{
}

#fittingbox-fitviewer #fittingbox-fitviewer-viewer #fittingbox-fitviewer-buttons > #fittingbox-fitviewer-button-360
{
}

#fittingbox-fitviewer #fittingbox-fitviewer-viewer #fittingbox-fitviewer-buttons > div:hover,
#fittingbox-fitviewer #fittingbox-fitviewer-viewer #fittingbox-fitviewer-buttons > div.selected
{
}

#fittingbox-fitviewer #fittingbox-fitviewer-more
{
}

#fittingbox-fitviewer #fittingbox-fitviewer-more.fittingbox-fitviewer-active
{
}

#fittingbox-fitviewer #fittingbox-fitviewer-more a
{
}

#fittingbox-fitviewer #fittingbox-fitviewer-more a:hover
{
}

#fittingbox-fitviewer #fittingbox-fitviewer-more a#fittingbox-fitviewer-more-facebook
{
}

#fittingbox-fitviewer #fittingbox-fitviewer-more a#fittingbox-fitviewer-more-twitter
{
}

#fittingbox-fitviewer #fittingbox-fitviewer-more a#fittingbox-fitviewer-more-googleplus
{
}

#fittingbox-fitviewer #fittingbox-fitviewer-more a#fittingbox-fitviewer-more-pinterest
{
}

#fittingbox-fitviewer #fittingbox-fitviewer-messages
{
}

#fittingbox-fitviewer-cssready
{
}