FitViewer Developer Documentation

Interactive example

Example


After editing Javascript code, click on the button below to generate a Fitlive.

Javascript Code

Edit javascript below and generate the widget online to test your configuration.
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'));
    }
);

CSS Code

Edit CSS below and generate the widget online to test your configuration.
#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
{
}