FitPhoto 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.
FitPhoto = Fb.FitPhoto.GetInstance(
    {
        FitPhoto:
        {
            container: '#myFitPhoto',
            width: 315,
            height: 420,
            language: 'en',
            menualwaysopened: false,
            standardmodels: true,
            cookieduration: 0,
            watermark: 'http://' + window.location.hostname + '/documentation/images/logo-debian.png',
            messages:
            {
                en:
                {
                    MenuModelsTitle: 'Select a model'
                }
            }
        }
    }
);
    
$('#frames img').click(
    function()
    {
        $('#frames img').removeClass('selected');
        $(this).addClass('selected');
        FitPhoto.SetFrame($(this).attr('rel'));
    }
);

CSS Code

Edit CSS below and generate the widget online to test your configuration.
#fittingbox-fitphoto {}

#fittingbox-fitphoto #fittingbox-fitphoto-logo {}

#fittingbox-fitphoto #fittingbox-fitphoto-title {}

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

#fittingbox-fitphoto #fittingbox-fitphoto-error {}

#fittingbox-fitphoto #fittingbox-fitphoto-error-title {}

#fittingbox-fitphoto #fittingbox-fitphoto-widget {}

#fittingbox-fitphoto #fittingbox-fitphoto-menu,
#fittingbox-fitphoto #fittingbox-fitphoto-menu-models {}

#fittingbox-fitphoto #fittingbox-fitphoto-menu-models {}

#fittingbox-fitphoto #fittingbox-fitphoto-menu {}

#fittingbox-fitphoto #fittingbox-fitphoto-menu-button {}

#fittingbox-fitphoto #fittingbox-fitphoto-menu-button.fittingbox-fitphoto-menu-button-opened {}

#fittingbox-fitphoto #fittingbox-fitphoto-push {}

#fittingbox-fitphoto #fittingbox-fitphoto-push strong {}

#fittingbox-fitphoto #fittingbox-fitphoto-viewer {}

#fittingbox-fitphoto #fittingbox-fitphoto-menu > ul {}

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

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

#fittingbox-fitphoto .fittingbox-fitphoto-menu-content > ul.imglist {}

#fittingbox-fitphoto .fittingbox-fitphoto-menu-content > ul.imglist > li {}

#fittingbox-fitphoto .fittingbox-fitphoto-menu-content > ul.imglist > li:last-child {}

#fittingbox-fitphoto .fittingbox-fitphoto-menu-content > ul.imglist > li.selected {}

#fittingbox-fitphoto .fittingbox-fitphoto-indicators {}

#fittingbox-fitphoto .fittingbox-fitphoto-indicators > li  {}

#fittingbox-fitphoto .fittingbox-fitphoto-indicators > li.active  {}

#fittingbox-fitphoto .fittingbox-fitphoto-indicators > li:last-child  {}

#fittingbox-fitphoto #fittingbox-fitphoto-menu-models-face .fittingbox-fitphoto-menu-content > ul > li > div {}

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

#fittingbox-fitphoto #fittingbox-fitphoto-messages {}