FitPhoto Developer Documentation

High definition

Example

Javascript Code

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

CSS Code

#fittingbox-fitphoto #fittingbox-fitphoto-menu-models
{
    height: 315px;
    bottom: -315px;
}

#fittingbox-fitphoto #fittingbox-fitphoto-menu-model-wrapper.fittingbox-fitphoto-menu-content
{
    margin: 0 72px;
}

#fittingbox-fitphoto .fittingbox-fitphoto-menu-content > ul.imglist
{
    height: 160px;
}

#fittingbox-fitphoto .fittingbox-fitphoto-menu-content > ul.imglist > li
{
    width: 120px;
    height: 160px;
}

#fittingbox-fitphoto .fittingbox-fitphoto-menu-content > ul.imglist > li.selected
{
    width: 118px;
    height: 158px;
}

#fittingbox-fitphoto #fittingbox-fitphoto-messages
{
    padding: 40px;
    margin: 0;
}