Example of how to set the number of visible panels using monitor's resolution

[fgosfacdjtq]

I'd like to contribute an example of how I set the number of visible panels on each side to 1.6 given an image size of 640 and a variable screen resolution:

    gBigPanelMax = 640;
    //figure out how big to make the carousel
    var carWidth = screen.width * .9;
    var bigPanelWidth = gBigPanelMax / screen.width;
    var smallPanelNum = 1.6;
    var smallPanelWidth = 1 / (2 * smallPanelNum) * (1 / bigPanelWidth - 1);
    //create the moving boxes carousel
    $('#carousel').movingBoxes({
        startPanel: 0,
        width: carWidth,
        panelWidth: bigPanelWidth,
        reducedSize: smallPanelWidth,
        imageRatio: 4 / 3
    });

works in FF3.5, Chrome 9, IE8

[Mottie]

Using screen.width is assuming the user has their browser maximized. My browser is almost never the same size as my screen size. So I would suggest using $(window).width() which obtains the width of the browser window.

[Mottie]

Added a "How to..." label to this and closing it since it isn't an issue :)