SimpleViewer-Pro allows precise control over the layout of a gallery by using the layout config options. This guide describes how SimpleViewer layout works.
This diagram shows an abstract representation of SimpleViewer 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.
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.
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.
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.
Specify caption height with the captionHeight option. For overlay captions, the caption height defaults to the height of the image/4.
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.
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. | ![]() |
![]() |
Check here for common layout problems and solutions.