TiltViewer Configuration Options

The following is a list of all the configuration options that can set for TiltViewer.

To set a configuration option for TiltViewer, edit the HTML file that contains TiltViewer in any text editor. Config options are set with JavaScript in this format:

fo.addVariable("titleFontSize", "50");

The first parameter is the name of the config option. The second parameter is the required value. Both parameters require quotation marks.

General Options

Option Name Default Value Description
useFlickr true Whether to use Flickr or a local XML file as the source of the images and text.
useReloadButton true Whether to use the circular reload button under the images, or to use next/back arrow buttons for gallery paging.
showFlipButton true

Whether to display the 'flip' button at the bottom-right of a zoomed in image. Affects all images.

For XML galleries, you can also remove the flip button for an individual image by adding the 'showFlipButton' property to the image's photo tag in the gallery XML document.

showLinkButton true

Whether to display the 'go to Flickr page' button on the image flipside. Affects all images.

For XML galleries, you can also remove the link button for an individual image by removing the 'linkurl' property from the image's photo tag in the gallery XML document.

showFullscreenOption true Whether to show the 'Go Fullscreen' button.
columns 5 Number of columns of images to display.
rows 5 Number of rows of images to display.
linkLabel go to Flickr page Text to display as the flipside link button label.
frameColor 0xFFFFFF Hexadecimal color value of the image frame.
backColor 0xFFFF00 Hexadecimal color value of the flipside background.
bkgndInnerColor 0x333333 Hexadecimal color value of the stage background gradient center.
bkgndOuterColor 0x000000 Hexadecimal color value of the stage background gradient edge.
langAbout About The text displayed for the right-click 'About' menu option. Can be used to translate TiltViewer into a non-English language.

Flickr Gallery Options

A Flickr gallery loads it's images and text from Flickr. To use this method, set useFlickr to true. For details on using this method, check here.

Option Name Example Value Description
user_id 48508968@N00

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

To find a Flickr user id, enter the user name on this page.
tags jump,smile A comma-delimited list of tags. Photos with one or more of the tags listed will be returned.
tag_mode any

Defines how multiple tags are combined for image search. Defaults to 'any' if not specified. Can be:

  • "any" for an OR combination of tags (image can have 1 or more tags to be displayed)
  • "all" for an AND combination (image must have all tags to be displayed)
showTakenByText true Whether to display the 'taken by X on Y' text on the image flipside.

XML Gallery Options

An XML gallery loads it's images and text from a specified XML file. To use this method, set useFlickr to false. For details on using this method, check here.

Option Name Default Value Description
xmlURL gallery.xml

Relative or absolute URL of the gallery XML file. Relative paths are relative to the HTML page that contains the swf. Only used if useFlickr is set to 'false'.
maxJPGSize 500 Set this value to the largest dimension (width or height) of your largest image. TiltViewer uses this value to proportionately scale your images to fit.

Pro Options

These options are supported by TiltViewer-Pro only.

Option Name Default Value Description
bkgndTransparent false

Whether to hide the radial gradient background behind the image grid. Set this to true when you want to show something behind TiltViewer either in the HTML doc or in the embedding SWF.

Check here for additional notes on using TiltViewer with HTML transparency.
frameWidth 40 Width of the image frames. To remove frames completely set this to -5.
zoomedInDistance 1400 Camera distance from image when zoomed in to an image. Increasing this value makes the image smaller.
zoomedOutDistance 7500 Camera distance from image-grid when zoomed out. Increasing this value makes the image-grid smaller.
fontName Arial Font style used by the flipside text. Note: this font is not embedded in the swf, so the user must have the specified font on their machine to view the font. If they don't have the specified font, they will see the default system font (usually 'sans')
titleFontSize 90 Font size of flipside title text.
descriptionFontSize 32 Font size of flipside description text.
linkFontSize 41 Font size of flipside link text.
linkTarget _blank The browser window or HTML frame in which to open links. You can enter the name of a specific window or use one of the following values:
  • "_self" specifies the current frame in the current window.
  • "_blank" specifies a new window.
  • "_parent" specifies the parent of the current frame.
  • "_top" specifies the top-level frame in the current window.
navButtonColor 0xFFFFFF Hexadecimal color of the reload or next/back buttons. Default color is white.
flipButtonColor 0xFFFFFF Hexadecimal color of the flip buttons. Default color is white.
textColor 0x000000 Hexadecimal color value of the flipside text.
linkTextColor 0xFFFFFF Hexadecimal color value of the flipside link text.
linkBkgndColor 0x000000 Hexadecimal color value of the flipside link text background.
enableSounds true Whether to play click sounds.
tiltAmountIn 75 Maximum amount to tilt the image grid when zoomed in (degrees)
tiltAmountOut 120 Maximum amount to tilt the image grid when zoomed out (degrees)