FitLive Developer Documentation

Full example

Example

Javascript Code

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();
}

CSS Code

#fittingbox-fitlive #fittingbox-fitlive-menu
{
    float: right;
}

#fittingbox-fitlive #fittingbox-fitlive-menu > ul > li
{
    margin: 0 0 5px 5px;
}

#fittingbox-fitlive .fittingbox-fitlive-menu-content 
{
    background-color: #F0F1F8;
    color: #356DE4;
}

#fittingbox-fitlive .fittingbox-fitlive-menu-title 
{
    color: #356DE4;
    background-color: #F0F1F8;
}

#fittingbox-fitlive .fittingbox-fitlive-menu-title:hover 
{
    background-color: #b6bce3;
    color: #356DE4;
}

#fittingbox-fitlive .fittingbox-fitlive-menu-title-opened 
{
    background-color: #b6bce3;
    color: #356DE4;
}

#fittingbox-fitlive .fittingbox-fitlive-menu-webcam-list > li,
#fittingbox-fitlive .fittingbox-fitlive-menu-adjust-list > li,
#fittingbox-fitlive .fittingbox-fitlive-menu-adjust-list > li:first-child
{
    padding: 10px;
    color: #356DE4;
    border: 1px solid #D4D8EB;
    background: #b6bce3;
    background: -webkit-gradient(linear,left top, left bottom, color-stop(0%,#F0F1F8), color-stop(100%,#b6bce3));
    background: -moz-linear-gradient(top, #F0F1F8 0%, #b6bce3 100%);
    background: linear-gradient(top, #F0F1F8 0%, #b6bce3 100%);
}

#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:hover,
#fittingbox-fitlive .fittingbox-fitlive-menu-adjust-list > li:hover
{
    background: #F0F1F8;
    color: #356DE4;
    background: -webkit-gradient(linear,left top, left bottom, color-stop(0%,#b6bce3), color-stop(100%,#F0F1F8));
    background: -moz-linear-gradient(top, #b6bce3 0%, #F0F1F8 100%);
    background: linear-gradient(top, #b6bce3 0%, #F0F1F8 100%);
}

#fittingbox-fitlive #fittingbox-fitlive-flashstyles #fittingbox-fitlive-flashstyles-buttons
{
	color: #356DE4;
	border-width: 1px;
	border-color: #D4D8EB;
	background: linear-gradient(top, #F0F1F8, #b6bce3);
}

#fittingbox-fitlive #fittingbox-fitlive-flashstyles #fittingbox-fitlive-flashstyles-buttons-over
{
	color: #356DE4;
	border-width: 1px;
	border-color: #D4D8EB;
	background: linear-gradient(top, #b6bce3, #F0F1F8);
}