• Registered: 2010-03-23
  • Posts: 2

Topic: Totally Lost - How to enbed Tilt into HTML, PSD layout

Probably a simple fix but i cant seem to embed the tilt viewer pro into an existing html page. Not sure if i need to copy the code into the <div tag or before that. Ive tried both ways and it throws everything out of alignment.

I am trying to place the tilt viewer into a <div with a preset BG. Not sure if i should appraoch it from the transparancy embedding option if i want the same background image to show through.

I am using PSD layout a converted to html, if that provides any insight.

Note, i did follow the instructions listed, but i'm rather new.

All the best

eclat

  • Registered: 2009-03-17
  • Posts: 2,725

Re: Totally Lost - How to enbed Tilt into HTML, PSD layout

Please post the URL for the page you are having trouble with.

The basics of embedding involve placing the following code into the body of your HTML where ever you would like it to go.
(instructions for embedding TiltViewer into an existing page)

<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>
Mike Richards
SimpleViewer Support Team.
  • Registered: 2010-03-23
  • Posts: 2

Re: Totally Lost - How to enbed Tilt into HTML, PSD layout

Mike, Thank you for your quick response. The url for the site page is: www.notthestandard.com/pmain.html

I would like to insert/embed/ the tilt viewer into the Larger blank box in the middle of the page. I have already created a <div for that area with that image set as the BG.

I am unsure of two things:

Firstly, should i be embedding the tilt viewer into the <div box or some other location? if so, how do i adjust the size of the viewer to fit into the preset <div> box in the page without it adjusting everything out of alignment.

Secondly, Should i use the transparency method to place the tilt viewer over the image in the selected area?

Thanks for your help.

eclat

  • Registered: 2009-03-17
  • Posts: 2,725

Re: Totally Lost - How to enbed Tilt into HTML, PSD layout

I would like to insert/embed/ the tilt viewer into the Larger blank box in the middle of the page. I have already created a <div for that area with that image set as the BG.


Place the TiltViewer code insdie this div.

how do i adjust the size of the viewer to fit into the preset <div> box in the page without it adjusting everything out of alignment.

var fo = new SWFObject("TiltViewer.swf", "viewer", "width", "height", "9.0.28", "#000000"); You can define the width and the height either as a percentage like "100%" or as pixels "640".

Secondly, Should i use the transparency method to place the tilt viewer over the image in the selected area?

Yes to set a background image you need to set the viewer to transparent and places the image behind it in the HTML.

Mike Richards
SimpleViewer Support Team.