FitPhoto Developer Documentation

Advanced configuration

Introduction

FitPhoto 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')
messages Custom messages
menualwaysopened Define behavior menu
standardmodels Define if standard models are available
models Custom models
cookieduration Cookie duration
watermark Absolute URL for watermark image file or 'none'
onCallToActionClick Function called when callToAction element is clicked
* See JSDoc Reference for more details.

Full example

window.onload = function()
{
    FitPhoto = Fb.FitPhoto.GetInstance(
        {
            FitPhoto:
            {
                container: '#myFitPhoto',
                width: 790,
                height: 1053,
                standardmodels: false,
                css: '/examples/highdef.css',
                cookieduration: 0,
                watermark: 'http://' + window.location.hostname + '/documentation/images/logo-debian.png',
                models: 
                [
                    {
                        source: 'http://' + window.location.hostname + '/images/examples/models/H1.jpg',
                        thumbnail: 'http://' + window.location.hostname + '/images/examples/models/120x160/H1.jpg'
                    },
                    {
                        source: 'http://' + window.location.hostname + '/images/examples/models/H2.jpg',
                        thumbnail: 'http://' + window.location.hostname + '/images/examples/models/120x160/H2.jpg'
                    },
                    {
                        source: 'http://' + window.location.hostname + '/images/examples/models/H3.jpg',
                        thumbnail: 'http://' + window.location.hostname + '/images/examples/models/120x160/H3.jpg'
                    },
                    {
                        source: 'http://' + window.location.hostname + '/images/examples/models/H5.jpg',
                        thumbnail: 'http://' + window.location.hostname + '/images/examples/models/120x160/H5.jpg'
                    }
                ],
                messages:
                {
                    fr:
                    {
                        MenuModelsTitle: 'Sélectionnez un modèle'
                    }
                }
            }
        }
    );
    
    $('#frames img').click(
        function()
        {
            $('#frames img').removeClass('selected');
            $(this).addClass('selected');
            FitPhoto.SetFrame($(this).attr('rel'));
        }
    );
}
* See High definition 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-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 {}