SimpleViewer.net

SimpleViewer-Pro 2.0 Layout Guide

Common Terms:

• Gallery Element - any displayable item in the gallery. Gallery elements include the image area, thumb area, caption area, title area and button bar.
• Main Image - the currently selected full-size image.
• Image Area - The main image is scaled to fit in the Image Area. The Image Area's dimensions are determined by the maxImageWidth and maxImageHeight options and the actual size of the SWF.
• Thumb Area - includes the thumbnails and the thumbnail navigation (next/back arrows or numerical navigation).
• Stacks - there are 4 stacks: top, bottom, left and right. Each stack may contain multiple gallery elements depending on the position option set for each element (thumbPosition, captionPosition, titlePosition and buttonBarPosition). Each stack is positioned relative to the main image at center. Stacks have a fixed size determined by the elements in it.
• Gallery Area - the area that contains all gallery elements.
• Stage Area - the entire area of the SimpleViewer SWF.

This diagram shows an abstract representation of SimpleViewer layout:

The blue area represents the Image Area The green area represents the Main Image. In this case the image is taller than it is wide. Top stack Left Stack Right Stack Bottom Stack The red area at stage edge is defined by the stageBorder option. Vertical spacing between elements is defined by the stageVPadding option. Horizontal spacing between elements is defined by the stageHPadding option. The white area represents the image frame. Frame width is defined by the frameWidth option.

Resizable Layout

By default, SimpleViewer galleries are resizable. The gallery will scale to fit the available browser window size (or monitor size in full-screen mode). This ensures the best display across multiple resolutions.

The gallery interface scales to fit the current stage size. Most elements in the gallery have fixed dimensions, it is the Image Area that scales. As the stage size changes, the Image Area is resized to fill the available area. The Main Image is then scaled to fill the Image Area, depending on the image scale mode.

If the stage area is larger than the gallery area, the gallery is aligned within the stage area. The stageHAlign and stageVAlign options determine how the Gallery Area is aligned within the Stage Area. This is used when the stage area is larger than the gallery area. By default the gallery is centered in the stage.

Floating Elements

The Caption and Button Bar can be set to 'float' by using the floatCaption and floatButtonBar options. When an element floats, it's height it not used in gallery layout. Floating elements may be cropped when the browser size is reduced down.

Locking Stacks

The top and bottom stacks can be set to be 'locked', using the lockTopStack and lockBottomStack options. If a stack is locked, it's position does not change depending on the displayed image dimensions. It's position is locked to the image area. If locked is set to false, the stack position and width changes to match the currently displaying Image. This is useful when displaying images with different sizes and aspect ratios, for example to make a caption below move to match the current image, set lockBottomStack to false.

Caption Width

When captionPosition is TOP or BOTTOM, the caption width matches the image width. If captionPosition is LEFT or RIGHT the captionWidth option is used. If the captionPosition and the thumbPosition are both LEFT or RIGHT then the caption width matches the Thumb Area Width.

Caption Height

Specify caption height with the captionHeight option. For overlay captions, the caption height defaults to the height of the image/4.

Fixed Layout

If you want a fixed size gallery and pixel level control over gallery elements, use the Fixed Layout Config Options. Fixed Layouts do not scale to fit the browser window.

Image Scaling

The imageScaleMode config option determines how the main image is scaled to fit the available image area. Note that the frame width is included when scaling an image to fit the image area. All scale modes maintain the images original aspect ratio except for STRETCH.

SimpleViewer handles images with different aspect ratios. Images can be tall (portrait) or wide (landscape). Images smaller than the image area are aligned within it depending on the imageHAlign and imageVAlign options.

The following table compares the various scale modes. The blue area represents the Image Area.

Scale Mode	Image Smaller than Image Area	Image Larger than Image Area
SCALE: Scales large images down to fit Image Area. Will not enlarge images above their actual resolution, ensuring maximum image quality. This is the default value.
SCALE_UP: Scales images up or down to fit Image Area.
FILL: Scales images up or down to completely fill the Image Area. Images larger than the Image Area are cropped to fit.
STRETCH: Image is stretched to exactly fit image area, losing image's aspect ratio.
NONE: Image is not scaled. Images larger than the Image Area are cropped to fit.

Layout Troubleshooting

Check here for common layout problems and solutions.

I have extra spacing in my gallery. How do I get rid of it?

1. First set the background color of the Gallery to be different than the embedding HTML page. This will show if the extra space is in the SimpleViewer SWF or in the HTML page. If the extra spacing is outside the SWF you need to edit your HTML and/or CSS to reduce spacing.
2. Check for invisible gallery elements. If you are not using the Caption or Title, make sure captionPosition and/or titlePosition are set to NONE. Use the titleBackColor, titleBackOpacity, captionBackColor, and captionBackOpacity options to make these elements visible.
3. Make sure your Main Image is filling the Image Area by reducing maxImageHeight and maxImageWidth or increasing the actual image JPG size. Use the imageBackColor, and imageBackOpacity options to make the Image Area visible.
4. Reduce the stageBorder, stageVPadding and/or stageHPadding options.
5. Reduce the size of the SWF so that the gallery fills the SWF.