TiltViewer-Pro Documentation

This documentation will help you customize TiltViewer-Pro to fit your requirements.

TiltViewer-Pro can be used to extend exisiting TiltViewer galleries. For information on how to create a TiltViewer gallery, check here.

Index:

1. TiltViewer-Pro Folders
2. Customizing TiltViewer-Pro
3. Embedding TiltViewer-Pro
4. Upgrading Existing Galleries to TiltViewer-Pro
5. TiltViewer-Pro FAQ

1. TiltViewer-Pro Folders

The following folders are in contained in the TiltViewer-Pro download:

• web\ folder contains files to post to your website. This folder contains a version of the TiltViewer swf without the download link. To use this with your existing galleries check here.
• examples\ folder contains examples of embedding TiltViewer in a HTML document (see Embedding TiltViewer)
• flash_embed\ folder contains examples of embedding TiltViewer in a Flash or HTML document (see Embedding TiltViewer)

2. Customizing TiltViewer-Pro

TiltViewer-Pro supports the same config options as TiltViewer, as well as an additional set of Pro only options. View the list of Config Options here.

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.

3. Embedding TiltViewer

When displaying TiltViewer on your site you can use the standard full-page HTML template, or you can embed TiltViewer inside a HTML page or another Flash Movie.

3.1 Embedding TiltViewer in a HTML page

Check the \examples\ folder for examples of embedding TiltViewer in a HTML document. There are 2 examples:

• boxed.html - example of a fixed width and height viewer embedded inside a webpage
• transparent.html - example of a transparent swf overlaying a CSS background gif.

3.1.1 HTML Transparency

TiltViewer-Pro can be used with HTML transparency so it can be layered over other HTML page elements. Check the 'transparent.html' example in the 'examples' folder.

Due to a limitation in the flash player, HTML transparency breaks Fullscreen mode. Therefore you should turn off the Fullscreen option by setting the 'showFullscreenOption' config option to false. To support HTML transparency, add the following lines in the TiltViewer configuration code:

fo.addParam("wmode", "transparent");  
fo.addVariable("bkgndTransparent", "true");  
fo.addVariable("showFullscreenOption", "false");  

3.2 Embedding TiltViewer in a Flash Movie

There are 2 example FLA files in the \flash_embed\ folder that show how to embed tiltviewer in a shell swf. TiltViewer is written in AS3. This means the embedding flash movie must also be AS3. The embed examples require Flash CS3 Authoring to edit.

• flash_embed.fla - this file demonstrates loading TiltViewer into a shell swf. Check the Actionscript code in the first frame of 'actions' layer for an example of:
  • Setting config options from with the FLA
  • Optional custom resizing and masking of TiltViewer.
  • Toggling TiltViewer visibility
• flash_embed_multiple.fla - this file demonstrates switching between 2 TiltViewer galleries with different options. Check the Actionscript code in the first frame of 'actions' layer.

4. Upgrading Existing Galleries to Pro

To upgrade existing TiltViewer galleries to TiltViewer-Pro, replace the TiltViewer.swf file in your existing gallery folders with the one that comes in the Pro download (at \web\TiltViewer.swf).

5. TiltViewer-Pro FAQ

1. How do I change the angle at whichc the Image grid is tilted?

Use the 'tiltAmountIn' and 'tiltAmountOut' config options (added in TiltViewer-Pro v1.3.1)