SimpleViewer-Pro Config Options

Use the SimpleViewer-Pro configuration options to customize your SimpleViewer-Pro galleries. The following is a complete list of all the configuration options for SimpleViewer-Pro.

Config options are kept in an XML file. Set these options by using svBuilder or by editing the gallery.xml file directly in any text editor. To add an option by editing the XML, add a line inside the opening simpleviewergallery tag in this format:

optionName = "optionValue"

If an option is missing from the XML it will take it's default value specified below. It is also possible to set any of the XML options below using the same method as the HTML options. View an example gallery.xml file.

General Options

Miscellaneous gallery-wide options.

Option Name Default Value Description
stageBorder 10

Amount of space at edge of gallery in pixels.
stageHPadding 30 Amount of horizontal space between gallery elements in pixels.
stageVPadding 10 Amount of vertical space between gallery elements in pixels.
stageVAlign CENTER

Vertical placement of the gallery within the SWF. Can be useful for getting the image flush to the edge of the swf. Can be:

  • CENTER
  • TOP
  • BOTTOM
stageHAlign CENTER

Horizontal placement of the gallery within the SWF. Can be useful for getting the image flush to the edge of the swf. Can be:

  • CENTER
  • LEFT
  • RIGHT
lockTopStack TRUE Whether the top stack position and size should be locked, or should move and resize to match to the current image size.
lockBottomStack TRUE Whether the bottom stack position and size should be locked, or should move and resize to match to the current image size.
enableKeyboardControls TRUE

Whether keyboard can be used to control gallery.

Keyboard controls are: Image navigation via cursor keys, Home, End, Page Up, Page Down. 'F' key for fullscreen toggle. Space bar for AutoPlay toggle.
enableMouseWheel FALSE

Whether mouse scroll wheel can be used to navigate between images.

Setting this to true may affect scrolling of the HTML page that contains SimpleViewer. Mouse wheel scrolling may not work on all OS/browser combinations dues to a limitation in the Flash Player.
languageCode AUTO

Language to use for tooltips and onscreen messages. Can be:

  • AUTO - Language detected automatically from user's system (Recommended).
  • DE - German
  • EN - English
  • ES - Spanish
  • FR - French
  • IT - Italian
  • JA - Japanese
  • NL - Dutch
  • NO - Norwegian
  • PL - Polish
  • PT - Portuguese
  • RU - Russian
  • SV - Swedish
  • ZH - Chinese
languageList "Previous,Next,Start AutoPlay,Stop AutoPlay,Play Audio,Pause Audio,Go FullScreen,Exit FullScreen,Open Image in New Window,Download Image,About,AutoPlay ON,AutoPlay OFF"

Used to specify a custom language for ToolTips and onscreen messages. This can be used to specify a language not handled by the languageCode above. Using this option overrides languageCode.

Specify text as a comma delimited list as shown left.
enableAPI FALSE Whether to enable the JavaScript API.
firstImageIndex 0 Index of image to display when gallery loads. Images are numbered beginning at zero. You can use this option to display a specific number based on the URL (view example here).
randomizeImages FALSE If set to true, images are randomly shuffled each time the gallery is loaded.
enableLooping FALSE Whether navigating or autoplaying beyond the last image loops back to the first image.
dropShadowStrength 1 Strength of drop shadows for buttons. Set to 0 to disable drop shadows.
imagePath "images/"

[Depreciated] Relative or absolute path to images folder.

This option is used to ensure backward compatibility with v1.9 galleries. If you are using the v2 image tag format you can ignore this option.
thumbPath "thumbs/"

[Depreciated] Relative or absolute path to thumbnail images folder.

This option is used to ensure backward compatibility with v1.9 galleries. If you are using the v2 image tag format you can ignore this option.

Main Image

Controls appearance of the main image.

Option Name Default Value Description
maxImageWidth 800 Width of the widest image in the gallery. Used to determine the best layout for your gallery (pixels).
maxImageHeight 600 Height of tallest image in the gallery. Used to determine the best layout for your gallery (pixels).
imageClickMode NAVIGATE

Determines what happens when the user clicks on an image. Can be:

  • NAVIGATE - Enables Next/Back image navigation via Image Navigation Arrows.
  • OPEN_URL - Enables left click image to open a URL. Opens optional ‘linkURL’ + linkTarget’ in image tags, or defaults to imageURL. Setting this to true disables image navigation.
  • NONE - Clicking on the main image has no effect.
imageScaleMode SCALE

Determines how the main image is scaled to fit the available area. See the Layout Guide for details.

  • SCALE: Scale large images down to fit Image Area. Will not enlarge images above their actual resolution, ensuring maximum image quality.
  • SCALE_UP: Scale images up and down to fit Image Area.
  • FILL: Scale images up and down to completely fill Image Area. Large images are cropped to fit image area.
  • STRETCH: Stretch image to exactly fit image area, losing image's aspect ratio.
  • NONE: No scaling. Large images are cropped to fit image area.
imagePreloading PAGE

Determines how images are preloaded. Also controls if images are kept in memory after being viewed.

  • PAGE - Preloads all images in the current thumbnail page. Unloads all images in the previous thumbnail page.
  • NEXT - Preloads image after currently viewed image. Unloads previously viewed images.
  • ALL - Preloads all images in gallery. Maximum usability. Images never unloaded. Not good for large galleries (image count > 50)
  • NONE - No image preloading. Conserves server bandwidth at cost of slower responsiveness.
imageSmoothing TRUE

Whether to smooth resized images.

Setting this to 'TRUE' improves resized image quality but uses more CPU resources. If you have a large gallery that is running slowly, setting this to FALSE may help. This setting also applies to background image.
imageFrameStyle SQUARE
  • SQUARE
  • ROUNDED
  • NONE
frameColor #FFFFFF

Color of image frame, thumbnail frame, image navigation arrows and thumb navigation arrows. These values can also be set separately (see below).

Hexadecimal color value.
frameWidth 20 Width of image frame (pixels).
imageCornerRadius 10 Image frame rounded corner radius. Used when imageFrameStyle is ROUNDED.
imageDropShadow FALSE Whether to apply a drop shadow to the main image. Setting this to TRUE may impact performance for large images.
imageTransitionType FADE

How to transition between images. Can be:

  • FADE - Old image fades down to background color then new image fades in.
  • CROSS_FADE - Crossfade between old and new image
  • SLIDE - Old Image slides out while new image slides in.
  • FLASH - New image pops in and flashes exposure from white.
  • NONE - No transition. New image pops in.
imageTransitionTime .3 Image transition tween length (seconds)
flashBrightness 2 Brightness value for FLASH transition type. 2 = white, 0 = black, 1 = no flash.
imageHAlign CENTER Horizontal placement of the image within the image area. Can be:
  • CENTER
  • LEFT
  • RIGHT
imageVAlign
 CENTER

Vertical placement of the image within the image area. Can be:

  • CENTER
  • TOP
  • BOTTOM
imageBackColor #000000 Color of image Area behind the main image
imageBackOpacity 0 Opacity of Image Area behind the main image. 0 = transparent. 1 = opaque.

Image Overlay Options

Control the overlay elements that appear over the main image.

Option Name Default Value Description
showOverlay HOVER

When to show the image overlay.

  • HOVER - when mouse is over the main image.
  • ALWAYS
  • NEVER
showImageNav HOVER

When to show the image navigation buttons (arrow buttons that overlay the main image). Can be:

  • HOVER - show buttons when mouse is over the main image
  • ALWAYS
  • NEVER
imageNavStyle CIRCLE Image Navigation Button style. Can be:
  • CURSOR - small arrow that follows cursor.
  • BIG
  • CIRCLE
  • SQUARE
  • CLASSIC
  • TRIANGLE
imageNavScale 1 Scale of Image Nav buttons.
imageNavColor #FFFFFF Color of Image Nav Button Icon.
imageNavBackColor #000000 Color of Image Nav Button background. Applies for imageNavStyle is CIRCLE, SQUARE.
imageNavBackOpacity 0.5 Opacity of Image Nav Button background. Applies for imageNavStyle is CIRCLE, SQUARE. 0 = transparent. 1 = opaque.
imageNavPadding 0 Spacing between Image Nav Buttons and Image edge.
hideOverlayOnTransition TRUE

Whether to hide the overlay on image transitions.

Should only be set to false when the image size remains constant, otherwise there may be some jumping on image transition.
overlayFadeTime 0.3 Time to fade up the overlay on image transition in seconds.
showBigPlayButton FALSE Shows a big centered play button when gallery first loads. Clicking play button starts autoplay.

Thumbnails

Controls the image thumbnails.

Option Name Default Value Description
thumbPosition LEFT

Position of thumbnails relative to main image. Can be:

  • TOP
  • BOTTOM
  • RIGHT
  • LEFT
  • NONE
thumbColumns 3 Number of thumbnail columns.
thumbRows 4 Number of thumbnail rows.
thumbWidth 75 Width of thumbnail images (pixels).
thumbHeight 75 Height of thumbnail images (pixels).
thumbPadding 8 Space between thumbs (pixels).
thumbFrameColor #FFFFFF Color of thumbnail frames.
thumbFrameHoverColor #FFFFFF Color of thumbnail frames when mouse is hovered.
thumbFrameStyle SQUARE

Thumbnail frame style. Can be:

  • SQUARE
  • ROUNDED
  • NONE
thumbCornerRadius 10 Rounded corner radius. Used when 'thumbFrameStyle' is 'ROUNDED'.
thumbFrameWidth 2 Width of frame (pixels). Thumbnail frame sits over thumbnails.
thumbHoverFrameWidth 6 Width of thumbnail frame when mouse is over thumb (pixels)
showThumbVisited TRUE Whether to show the visited dog ear icon when an image has been viewed.
showThumbLoadBar TRUE Whether to show load bar on image load
thumbLoadBarHeight 10 height of thumbnail load bar (pixels)
thumbClickShift 2 Distance thumbnail moves on click (pixels). This value cannot be greater than thumbPadding.
thumbLoadingAlpha 60 Alpha of thumbnail while image loads (percent)
thumbDropShadow TRUE Whether to apply a drop-shadow to the thumbnails.
thumbHAlign CENTER Horizontal alignment of thumbs relative to main image. Used if thumbsPosition is TOP or BOTTOM. Can be:
  • CENTER
  • LEFT
  • RIGHT
thumbVAlign CENTER Vertical alignment of thumbs relative to main image. Used if thumbsPosition is LEFT or RIGHT. Can be:
  • CENTER
  • TOP
  • BOTTOM
thumbPreloading PAGE

How to preload thumbnails.

  • PAGE: Loads all thumbnails in the current thumbnail page.
  • ALL: Preloads all thumbnails in gallery.
thumbLoadBrightness 0.7

The brightness of the thumbnail images while they are being loaded. Can be any number between:

  • 0 = Black,
  • 1 = Regular Brightness
  • 2 = White
doThumbPopOut TRUE Whether to show the 'pop-out' animation when a thumbnail loads.
changeCaptionOnHover FALSE Whether to change the caption when a thumb is rolled over.
changeImageOnHover FALSE Whether to change the main image when a thumb is rolled over.

Thumbnail Navigation Options

Controls the appearance of the thumbnail navigation. These can be arrow buttons or numeric buttons.

Option Name Default Value Description
thumbNavStyle CIRCLE

Thumbnail navigation button style. Can be:

  • CIRCLE
  • CLASSIC
  • BIG
  • SQUARE
  • TRIANGLE
  • NUMERIC- small numbered buttons
  • NONE
thumbNavPosition BOTTOM

Vertical position of thumbnail nav buttons relative to the thumbnails. Can be:

  • CENTER - left and right of the thumbnails
  • BOTTOM - below the thumbnails.
thumbNavColor #FFFFFF Color of nav button icons.
thumbNavHoverColor #FFFFFF Color of nav button icons on mouse hover.
thumbNavBackColor #000000 Color nav button background.
thumbNavBackOpacity 0.5

Opacity of nav button background. 0 = transparent. 1 = opaque.
thumbNavPadding 10 Spacing between thumbnail nav buttons and the thumbnails.
thumbNavSlideTime 1 Time for the thumbnails to slide between pages (seconds)

Button Bar Options

Button Bar is a set of buttons for Fullscreen, AutoPlay, Audio, Image Nav, Download Image

Option Name Default Value Description
buttonBarPosition STAGE_TOP

Position of button bar. Can be:

  • STAGE_TOP - above all other gallery elements
  • TOP - in Top Stack
  • BOTTOM
  • LEFT
  • RIGHT
  • OVERLAY - As part of image overlay
  • NONE
showOpenButton TRUE

Whether to show 'Open Image in New Window' button and right-click menu option.
showFullscreenButton TRUE

Whether to show 'Go Fullscreen' button and right-click menu option.

Note: For fullscreen mode to work the 'allowfullscreen' flash param must be set to true in the HTML doc.
showDownloadButton FALSE

Whether to show the download button and the 'Download Image...' right-click menu option.

Note that download functionality does not work locally. To use download functionality, upload the SWF to a web server.
showNavButtons TRUE Whether to show the next and back image navigation buttons.
showAutoPlayButton FALSE Whether to show the autoplay button.
showAudioButton FALSE Whether to show the audio toggle button.
showToolTips TRUE Show text tooltips when mouse hovers over button bar buttons.
buttonBarHAlign RIGHT Horizontal alignment of Button bar. Can be:
  • CENTER
  • LEFT
  • RIGHT
buttonBarVAlign TOP Vertical alignment of Button Bar. Can be:
  • CENTER
  • TOP
  • BOTTOM
buttonBarPadding 10 Used if buttonBarPosition is OVERLAY
buttonBarColor #FFFFFF Color of button bar icons.
buttonBarHoverColor #FFFFFF Color of button bar icons on mouse hover.
buttonBarBackColor #000000 Color of button bar background.
buttonBarBackOpacity 0.5 Opacity of button bar background. 0 = transparent. 1 = opaque.
buttonBarScale 1

Size scaling to apply to button bar. 1 is original size.
floatButtonBar FALSE Whether to 'float' the ButtonBar when laying out the gallery. Setting this to true means the ButtonBar height is not counted in stage layouts. This can be useful for tucking in the Button Bar over other stage elements.

Title Options

Control the appearance of the gallery title.

Option Name Default Value Description
title "" Text to display as gallery Title
titlePosition LEFT

Position of gallery title text relative to main image. Overrides gallery 'titlePosition' option. Can be:

  • TOP
  • BOTTOM
  • RIGHT
  • LEFT
  • OVERLAY_TOP
  • OVERLAY_BOTTOM
  • NONE
titleFontName "Helvetica, Arial,_sans"

Comma delimited list of system fonts to use for captions. Note these fonts must be on the user's machine to be displayed.

Example: "Helvetica, Arial,_sans"
titleFontColor #FFFFFF  
titleFontSize 22 Default title font size. Can be overridden by HTML formatting.
titlePadding 0 Padding inside Title Area (pixels)
titleBackColor

 #000000  
titleBackOpacity 0 Opacity of title background. 0 = transparent. 1 = opaque.
titleWidth 200 Used for titlePosition is LEFT or RIGHT
titleHeight 22 Not used if floatTitle is true.
titleDropShadow FALSE Whether to display drop shadow on Title text.
floatTitle TRUE

Whether to 'float' the title when laying out the gallery. Setting this to true means the caption height is not counted in stage layouts and the title height will automatically resize to fit the title text.
titleTextAlignment LEFT

Alignment of title text within text area. Can be:

  • LEFT
  • RIGHT
  • CENTER

Caption Options

Option Name Default Value Description
captionPosition LEFT

Position of caption relative to main image. Can be:

  • TOP
  • BOTTOM
  • RIGHT
  • LEFT
  • OVERLAY_TOP
  • OVERLAY_BOTTOM
  • NONE
captionFontName "Helvetica, Arial,_sans"

Comma deli meted list of system fonts to use for captions. Note these fonts must be on the user's machine to be displayed.

Example: "Helvetica, Arial,_sans"
captionFontColor #FFFFFF  
captionFontSize 14 Default caption font size. Can be overridden by HTML formatting.
showImageNumber TRUE Whether to show "3/14" image numbers in caption
imageNumberFontSize 12 Image number font size
captionPadding 10 Padding inside caption Area (pixels)
captionTextAlignment LEFT

Alignment of caption text within text area. Can be:

  • LEFT
  • RIGHT
  • CENTER
captionBackColor

 #000000  
captionBackOpacity 0 Opacity of caption background. 0 = transparent. 1 = opaque.
captionWidth 200 Used for titlePosition is LEFT or RIGHT. Width of caption area, including padding.
captionHeight 120

Height of caption area, including padding.

captionDropShadow FALSE Whether to display drop shadow on caption text.
enableCaptionLinks TRUE Whether to allow clickable hyperlinks in the caption text.
floatCaption TRUE

Whether to float the caption when laying out the gallery. Setting this to true means the caption height is not counted in stage layouts.

AutoPlay

Optional AutoPlay mode. AutoPlay mode will always wait for the next image to be loaded before showing it, to avoid seeing load bars on a slow connection.

Option Name Default Value Description
autoPlayOnLoad FALSE Whether to automatically start playing when gallery is loaded.
displayTime 5 Number of seconds each image will display in autoplay mode. AutoPlay will always wait for the next image to be loaded before showing it, so this is the minimum display time
showAutoPlayStatus TRUE Whether to show the "AutoPlay ON/OFF" message when user toggles autoplay mode.
goNextOnAutoPlay FALSE Whether to immediately navigate to the next image when the AutoPlay mode is turned on.

autoPlayThumbs		 TRUE Whether to navigate thumbs to match current image when autoplaying.

Audio

Optional audio to play while perusing the gallery.

Option Name Default Value Description
audioURL ""

Relative or absolute URL for music MP3 file (e.g. "sounds/music.mp3"). Relative paths are relative to the HTML document that contains SimpleViewer.

Set to "" for no audio.
loopAudio TRUE Whether to loop the audio forever.
playAudioOnLoad FALSE Whether to automatically start the audio when gallery is loaded.
audioVolume 0.8 Audio volume

Background Image

Optional background image to sit behind the gallery. Background image is resized to fit the SWF size. Image fades in after loading. Background image is aligned to top-left of SWF.

Option Name Default Value Description
backgroundURL ""

Relative or absolute URL to a JPG or SWF to load as the gallery background. Set to "" to disable background image.

Relative paths are relative to the HTML document that embeds SimpleViewer.

backgroundScale STRETCH

Defines how the background image is scaled to fit the SWF size. Can be:

  • FILL: Scale image up and down to completely fill SWF. Large images are cropped to fit image area.
  • STRETCH: Stretch image to exactly fit image SWF, losing image's aspect ratio.
  • NONE: No scaling.

WaterMark

Control optional image watermark to be displayed over all images. Watermark can be clickable to lead to external URL.

Option Name Default Value Description
watermarkURL "" Relative or absolute URL to a JPG, PNG or SWF to load as the watermark. Set to "" to disable watermark
watermarkHAlign RIGHT Horizontal alignment of watermark within image. Can be:
  • CENTER
  • LEFT
  • RIGHT
watermarkVAlign BOTTOM Vertical alignment of watermark within image. Can be:
  • CENTER
  • TOP
  • BOTTOM
watermarkPadding 10  
watermarkLinkURL "" Relative or absolute URL to navigate to when clicking watermark. Set to "" to disable clickable watermark.
watermarkLinkTarget _self  

Flickr Options

Fine grain control over flickr image loading.

Option Name Default Value Description
useFlickr FALSE

Whether to use Flickr as the source of the images and text. Set to false for an XML gallery.

If set to true and no user name or tags are specified, SimpleViewer will fetch Flickr's current most interesting images.
flickrUserName ""

The Flickr user name of the photos to display. If this parameter isn't passed then everybody's public photos will be searched.

To get your flickr user name, login to flickr and look for the 'signed in as...' text at the top right.

Example: "felixturner"
flickrTags ""

A comma separated list of tags. Photos with one or more of the tags listed will be returned.

Example: "jump,smile"
flickrUserId ""

Can be used instead of flickrUserName. Get a Flickr User Id here.

Example: "48508968@N00"
flickrSetId ""

The id of the photoset to return the photos for. (Overrides Flickr username and tags). To get a Flickr set id, go to the set's Flickr page. The id is the last numerical string in the URL.

Example: "72157621508233058"
flickrGroupId ""

The id of a group who's pool to search. If specified, only matching photos posted to the group's pool will be returned. The first (one) flickrTags can also be used in a group search. Get a Flickr Group Id here.

Example: "13813978@N00"
flickrTagMode ALL

Defines how multiple tags are combined for flickr tag search. Can be:

  • ALL - use AND combination (image must have all tags to be displayed)
  • ANY - use OR combination (image can have 1 or more tags to be displayed)
flickrSort DATE-POSTED-DESC

The order in which to sort returned photos. Defaults to date-posted-desc. The possible values are:

  • DATE-POSTED-DESC
  • DATE-POSTED-DESC
  • DATE-POSTED-ASC
  • DATE-TAKEN-ASC
  • DATE-TAKEN-DESC
  • INTERESTINGNESS-DESC
  • INTERESTINGNESS-ASC
  • RELEVANCE

Note this option does not work for set and group searches which always use the Flickr set display order. To change the image order for a Flickr set, check here.
flickrImageSize LARGE

Image size to load from flickr. Can be:

  • MEDIUM - 500 on longest side
  • LARGE - 1024 on longest side (only exists for original images larger than 1280). If the large version does not exist SimpleViewer will fetch the medium version.
  • ORIGINAL - Original uploaded image dimensions. To access the original image size the image's privacy must be set to public and its license set to Attribution-NonCommercial-ShareAlike Creative Commons.
flickrImageCount 50 Number of images to return in a flickr gallery. Can be from 1 to 500. More images take longer to load.
flickrExtraParams   A comma separated list of additional parameters to be passed to a tag search. View a list of possible values here. Enter params in this format: "content_type=2,has_geo=1"
flickrShowTitle TRUE Whether to show the Flickr image's title in the caption
flickrShowDescription TRUE Whether to show the Flickr image's description in the caption
flickrShowPageLink FALSE Whether to show a link to the Flickr image's photo page in the caption
flickrPageLinkText "View Photo Page" Text used for the flickr caption page link.
flickrTitleFontName "Helvetica, Arial,_sans"

Comma delimited list of system fonts to use for Image Titles. Note these fonts must be on the user's machine to be displayed. Overrides 'captionFontName'.

Example: "Helvetica, Arial,_sans"
flickrTitleFontColor 0xFFFFFF  
flickrTitleFontSize 22 Flickr Title font size in caption

Back Button

Optional Back Button appears at gallery top-left and offers a way for users to navigate away from a full browser gallery. Can be used to link to any URL.

Option Name Default Value Description
showBackButton FALSE Whether to show optional back button.
backButtonText < Back Display HTML text for optional back button.
backButtonURL "" Relative or absolute URL to navigate to when clicking back button. If set to "", the back button goes back one page in the browser's history.
backButtonFontColor #FFFFFF  
backButtonFontSize 12  
backButtonFontName Helvetica, Arial,_sans  
backButtonBackColor #000000  
backButtonBackOpacity 0.5 Opacity of back button background. 0 = transparent. 1 = opaque.
backButtonX 10 Position of back button relative to stage left.
backButtonY 10 Position of back button relative to stage top.

Fixed Layout Positions

These options are only used if useFixedLayout is set to TRUE. Use these values to give absolute fixed positions to stage elements. These are useful to achieve a custom layout not supported by the options above.

Option Name Default Value Description
useFixedLayout FALSE Whether to used fixed layout of stage elements, or dynamic resizing based on browser window size
imageAreaX 280  
imageAreaY 60  
imageAreaWidth 500  
imageAreaHeight 500  
thumbAreaX 10  
thumbAreaY 140  
captionX 10  
captionY 520  
titleX 10  
titleY 100  
buttonBarX 700  
buttonBarY 10  

HTML Options

These options are set in the HTML document that contains SimpleViewer-Pro. To modify these options, edit the HTML doc with any text editor. HTML options are set with JavaScript in this format:

flashvars.galleryURL = "gallery.xml";

Option Name Default Value Description
galleryURL gallery.xml

Relative or absolute URL of the gallery XML file. Relative paths are relative to the HTML page that contains the swf.

Useful if you want to load gallery xml data from somewhere other than the default location.
baseURL ""

If set, all relative URLs (e.g. to images and thumbnails) will be relative to this URL.

Useful when embedding SimpleViewer in a separate domain than the HTML page that contains it (e.g. MySpace, eBay etc).

preloaderColor #FFFFFF Gallery preloader color (hexadecimal color value).