TiltViewer-Pro Support Home

Check here for TiltViewer-Pro support and documentation.

Frequently Asked Questions

If you have a question about using TiltViewer-Pro, please check the FAQ first. Chances are your question has already been answered.

Support Forum

TiltViewer is supported via an online forum. Before posting a new question, please search the forum to see if your question has already been answered.

1. Using TiltViewer-Pro

TiltViewer-Pro allows you to customize your TiltViewer galleries.

To create a new TiltViewer-Pro gallery, first use any of these methods to create a regular TiltViewer gallery. Then upgrade the gallery to TiltViewer-Pro by replacing the TiltViewer.swf' file in your gallery folder with the one that comes in the Pro download (at '\web\TiltViewer.swf').

To use TiltViewer-Pro's extended customization options check Customizing TiltViewer-Pro.

To upgrade an existing TiltViewer gallery to TiltViewer-Pro or to use TiltViewer-Pro with a Template or Plugin, check here.

1.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

To embed TiltViewer-Pro in an existing HTML Page, check the instructions here.

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

Embedding TiltViewer in Flash requires the embedding movie to be ActionScript 3 and requires Adobe Flash CS3 (or later) authoring software. Embedding TiltViewer-Pro in Flash requires a basic level of Flash authoring experience.

There are 2 example FLA files in the \flash_embed\ folder that show how to embed tiltviewer in a shell swf.

  • 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).

4.1 Upgrading the Jalbum TiltViewer Skin

To upgrade the Jalbum TiltViewer Skin to TiltViewer-Pro:

  • Copy the 'TiltViewer.swf' file that comes in the Pro download (at '\web\TiltViewer.swf'). Rename the copy to 'viewer.swf'. Copy this file into the '\JAlbum\skins\TiltViewer\res' folder, replacing the existing file.
    • On Windows with Jalbum v8.1.4 or earlier, copy the file to: 'C:\Users\my_username\AppData\Roaming\JAlbum\skins\TiltViewer\res'
    • On Windows with Jalbum v8.1.5 or later, copy the file to: 'C:\Program Files\Jalbum8.1\skins\TiltViewer\skins\TiltViewer\res '
  • Restart Jalbum. Any galleries you create from now on will use the Pro swf.
  • Clear browser cache.
  • You will know if you are using the Pro version if the download link is missing at bottom-right.
  • Configuring Pro options can be done by manually editing the generated HTML document.

4.2 Upgrading the Photoshop TiltViewer Script

To upgrade the Photoshop TiltViewer Script to TiltViewer-Pro:

  • Copy the 'TiltViewer.swf' file that comes in the Pro download (at '\web\TiltViewer.swf') into the Photoshop TiltViewer script folder, replacing the existing file.
    • Windows: The Photoshop TiltViewer script folder is usually at 'C:\Program Files\Adobe\Adobe Photoshop CSX\Presets\Scripts\airtight_interactive\tilt_viewer\'
    • Macintosh: The Photoshop TiltViewer script folder is usually at '/Applications/Adobe Photoshop CSX/Presets/Scripts/airtight_interactive/tilt_viewer/'
  • Restart Photoshop. Any galleries you create from now on will use the Pro swf.
  • Clear browser cache.
  • You will know if you are using the Pro version if the download link is missing at bottom-right.
  • Configuring Pro options can be done by manually editing the generated HTML document.