FitLive Developer Documentation

Advanced configuration

Introduction

FitLive 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
language Application language
css Custom CSS file
messages Custom messages
onReady Callback function called when FitLive is ready
onDetect Callback function called when FitLive has detected face
onTryon Callback function called when FitLive is trying
onTracking Callback function called when FitLive is tracking
onTrackingLost Callback function called when FitLive looses tracking
onCallToActionClick Function called when callToAction element is clicked
nofullscreen Boolean to enable/disable fullscreen (Default: false)
nocompare Boolean to enable/disable compare mode (Default: false)
* See JSDoc Reference for more details.

Full example

window.onload = function()
{
    FitLive = Fb.FitLive.GetInstance(
        {
            FitLive:
            {
                container: '#myFitLive',
                height: 350,
                language: 'fr',
                css: '/examples/full.css',
                nofullscreen: false,
                nocompare: false,
                messages:
                {
                    fr:
                    {
                        MenuWebcamTitle: 'Caméra',
                        MenuWebcamText: 'Choisir une caméra :',
                        MenuWebcamSetMirrorMode: 'Inverser l\'image',
                        MenuAjustTitle: 'Ajuster sur votre tête',
                        MenuAjustText: 'Ajuster plus précisément',
                        MenuAjustAutomatic: 'Automatiquement',
                        MenuAjustManual: 'Manuellement',
                        ErrorTitle: 'Erreur',
                        ErrorHasFlash: 'Pas de flash',
                        ErrorHasFlashVersionSupported: 'Mauvaise version de flash',
                        ErrorIsAlive: 'Problème de chargement',
                        ErrorHasHardwareAcceleration: 'Pas d\'accélération matérielle',
                        ErrorHasWebcam: 'Pas de caméra',
                        ErrorHasWebcamSupported: 'Pas de caméra supportée',
                        ErrorRequest: 'Pas d\'internet',
                        ErrorContainer: 'Pas de conteneur trouvé',
                        ErrorSetFrame: 'La paire n\'existe pas',
                        ViewerDetectionText: 'Placez-vous au centre du guide et attendez...',
                        ViewerAfterDetectionText: 'Pressez la barre d\'espace pour relancer'
                    }
                }
            }
        }
    );
    
    $('#frames img').click(
        function()
        {
            $('#frames img').removeClass('selected');
            $(this).addClass('selected');
            FitLive.SetFrame($(this).attr('rel'));
        }
    );
    $('#frames img:first').click();
}
* See Full 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-fitlive {}

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

#fittingbox-fitlive #fittingbox-fitlive-error {}

#fittingbox-fitlive #fittingbox-fitlive-error-title {}

#fittingbox-fitlive #fittingbox-fitlive-widget {}

#fittingbox-fitlive #fittingbox-fitlive-menu,
#fittingbox-fitlive #fittingbox-fitlive-viewer {}

#fittingbox-fitlive #fittingbox-fitlive-menu {}

#fittingbox-fitlive #fittingbox-fitlive-viewer {}

#fittingbox-fitlive #fittingbox-fitlive-menu > ul > li {}

#fittingbox-fitlive .fittingbox-fitlive-menu-content {}

#fittingbox-fitlive .fittingbox-fitlive-menu-content-opened {}

#fittingbox-fitlive .fittingbox-fitlive-menu-title {}

#fittingbox-fitlive .fittingbox-fitlive-menu-title:hover {}

#fittingbox-fitlive .fittingbox-fitlive-menu-title-opened {}

#fittingbox-fitlive .fittingbox-fitlive-menu-title-opened:hover {}

#fittingbox-fitlive .fittingbox-fitlive-menu-webcam-mirrormode {}

#fittingbox-fitlive .fittingbox-fitlive-menu-webcam-mirrormode input {}

#fittingbox-fitlive .fittingbox-fitlive-menu-webcam-text,
#fittingbox-fitlive .fittingbox-fitlive-menu-adjust-text {}

#fittingbox-fitlive .fittingbox-fitlive-menu-webcam-list > li,
#fittingbox-fitlive .fittingbox-fitlive-menu-adjust-list > li {}

#fittingbox-fitlive .fittingbox-fitlive-menu-webcam-list > li:hover,
#fittingbox-fitlive .fittingbox-fitlive-menu-webcam-list > li.fittingbox-fitlive-menu-webcam-selected,
#fittingbox-fitlive .fittingbox-fitlive-menu-adjust-list > li:hover {}

#fittingbox-fitlive .fittingbox-fitlive-menu-adjust-list > li:first-child {}

#fittingbox-fitlive .fittingbox-fitlive-menu-adjust-list > li:first-child:hover {}

#fittingbox-fitlive .fittingbox-fitlive-menu-adjust-list > li {}

#fittingbox-fitlive .fittingbox-fitlive-menu-adjust-list > li:hover {}