Embedding TiltViewer in an Existing HTML Page.

To embed TiltViewer (or TiltViewer-Pro) into an existing HTML page do the following:

1. Create your TiltViewer gallery as normal (check instructions here).
2. Copy the entire contents of your TiltViewer gallery folder into the folder that contains your HTML page (including the swfobject.js file).
3. Edit your HTML document using a HTML or text editor. Copy and paste this code block where you want TiltViewer to appear:

   <script type="text/javascript" src="swfobject.js"></script> 
   <div id="flashcontent">TiltViewer requires JavaScript and the latest Flash player. 
   <a href="http://www.macromedia.com/go/getflashplayer/">Get Flash here.</a></div>
   <script type="text/javascript">  	  		
   var fo = new SWFObject("TiltViewer.swf", "viewer", "640", "480", "9.0.28", "#000000");
   
   // TILTVIEWER CONFIGURATION OPTIONS  		
   // To use an option, uncomment it by removing the "//" at the start of the line
   // For a description of config options, go to:   		
   //http://www.airtightinteractive.com/projects/tiltviewer/config_options.html
   
   //FLICKR GALLERY OPTIONS  	
   // To use images from Flickr, uncomment this block  	
   //fo.addVariable("useFlickr", "true");
   //fo.addVariable("user_id", "48508968@N00");
   //fo.addVariable("tags", "jump,smile");
   //fo.addVariable("tag_mode", "all");
   //fo.addVariable("showTakenByText", "true");
   
   // XML GALLERY OPTIONS
   // To use local images defined in an XML document, use this block
   fo.addVariable("useFlickr", "false");
   fo.addVariable("xmlURL", "gallery.xml");
   fo.addVariable("maxJPGSize","640");
   
   //GENERAL OPTIONS
   fo.addVariable("useReloadButton", "false");
   fo.addVariable("columns", "3");
   fo.addVariable("rows", "3");
   //fo.addVariable("bkgndInnerColor", "0xFFFFFF");
   //fo.addVariable("bkgndOuterColor", "0xFFFFFF");
   //fo.addVariable("frameColor", "0xAAAAAA");
   //fo.addVariable("navButtonColor", "0x000000");
   //fo.addVariable("showFlipButton", "true");
   fo.addVariable("showLinkButton", "false");
   //fo.addVariable("linkLabel", "View image info");
   //fo.addVariable("backColor", "0xDDDDDD");
   //fo.addVariable("langGoFull", "Go Fullscreen");
   //fo.addVariable("langExitFull", "Exit Fullscreen");
   //fo.addVariable("langAbout", "About");
   // END TILTVIEWER CONFIGURATION OPTIONS
   
   fo.addParam("allowFullScreen","true");
   fo.write("flashcontent");
   </script>	

4. To set TiltViewer configuration options, edit the JavaScript options from step 3 as described here
5. Upload the entire folder contents to your webserver.

Setting Gallery Size and Background Color

To set the gallery size and background color, edit this line from step 3 above:

var fo = new SWFObject("TiltViewer.swf", "viewer", "640", "480", "9.0.28", "#000000");

• Change the "640" to be the width of your gallery. It can be a pixel value ("800") or a percentage ("50%").
• Change the "480" to be the height of your gallery. It can be a pixel value ("600") or a percentage ("50%").
• Change the "#000000" to be the hexadecimal background color of your gallery.

Note for Dreamweaver Users:

To make TiltViewer work you need to use the embed method described above. Using Dreamweaver's Insert -> Media -> SWF method will cause TiltViewer to break. This is because TiltViewer uses SWFObject to embed the SWF. SWFObject is an industry standard way to embed flash content that handles Flash player detection and upgrade prompts. Using the default Flash embed method in Dreamweaver will not work, since the config options that are set in the Javascript will be ignored.

Example

Do a 'View Source' on this page to see this working example.

Download Example Files

Download the files for this example here.