Creating a TiltViewer XML Gallery

An XML gallery will load images that you have uploaded to a web server. Define the images and text for your gallery in an XML file you can create with any text editor.

To create an XML gallery, follow these steps:

  1. Download and unzip TiltViewer files to a new folder. This is your gallery folder.
  2. Copy your images into the 'imgs' folder in your gallery folder.
  3. Edit 'index.html' in your gallery folder using any text editor. Set the 'useFlickr' option to false:

    fo.addVariable("useFlickr", "false");

  4. Enter the largest dimension (width or height) of your largest image in the 'maxJPGSize' option. For example if your largest image is 1024 x 768 use this code:

    fo.addVariable("maxJPGSize","1024");

  5. Edit 'gallery.xml' in your gallery folder. Add a <photo> tag for each image in the gallery. Add an image URL, link URL, title and description text for each image:

    <photo imageurl="imgs/img.jpg" linkurl="http://www.google.com" showFlipButton="false">
    <title>My Image Title</title>
    <description>My Image Description.</description></photo>

    where

    • imageurl is a relative or absolute path to the image. Relative paths are relative to the HTML page that contains the swf.
    • linkurl is a relative or absolute path to URL that is reached by clicking the link button on the image flipside. Relative paths are relative to the HTML page that contains the swf. Removing this property will remove the link button from the image.
    • showFlipButton is an optional property to remove the 'flip' button on the image's front side.
    • title is the title text shown on the image flipside.
    • description is the description text. To include HTML formatting you need to wrap your description in a CDATA tag like this:

      <description><![CDATA[This is a HTML text description. Supported tags are <b>bold</b>, <u>underline</u>, <i>italics</i>, linebreaks<br>and <font color="#ff0000" size="60">font tags</font>. Hyperlinks are not supported.]]></description>

  6. Set additional configuration options (optional).