Topic: Embed Tiltviewer into specific HTML area

Hi wink

I'm a beginner in HTML so please be patient with me.
I am trying to place the tilt viewer into a specific HTML area.
I did follow the instructions in tiltviewer_embed_example but clearly i'm doing something wrong.

here's the link:

http://www.fpgbdesign.com/shanghai/expo … sicao.html

and the one i'd like to embed:

http://www.fpgbdesign.com/shanghai/exposicao

thanks for your time wink
cheers,
Ana

Re: Embed Tiltviewer into specific HTML area

It look like you have not uploaded the tiltviewer.swf or swfobjec.js to the server, both give a 404 not found error when you try to navigate to them.

http://www.fpgbdesign.com/shanghai/expo … Viewer.swf

http://www.fpgbdesign.com/shanghai/swfobject.js

Mike Richards
SimpleViewer Support Team.

Re: Embed Tiltviewer into specific HTML area

Also, you are missing part of the embedding code.
Currently you have:

<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");>

This should be:

<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");
fo.addParam("allowFullScreen","true");
fo.write("flashcontent");
</script>

You should also use a Doctype Declaration.
Put the following code at the very beginning of the HTML document (before the opening <html> tag).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
Steven Speirs
SimpleViewer Support Team.

Re: Embed Tiltviewer into specific HTML area

thank you both so much for you quick answer. wink

i've done all you said and all files are in the same folder:

exposicao.html
gallery.xml
images
index.php
preferences.txt
readme.html
swfobject.js
thumbs
TiltViewer.swf

here's the link:
http://www.fpgbdesign.com/shanghai/expo … sicao.html

maybe i'm placing the code in wrong line?!?!
thank you for you time.
cheers,
Ana

Re: Embed Tiltviewer into specific HTML area

The path to your 'swfobject.js' file is incorrect.
Change

<script type="text/javascript" src="../swfobject.js"></script> 

... to:

<script type="text/javascript" src="swfobject.js"></script> 
Steven Speirs
SimpleViewer Support Team.

Re: Embed Tiltviewer into specific HTML area

Perfect! Thank you so much Steven!
Cheeers wink

Re: Embed Tiltviewer into specific HTML area

Unfortunately something else is wrong. neutral

it doesn't show the gallery i edited with svmanager and chosen XML option.
this one:
http://www.fpgbdesign.com/shanghai/exposicao/

instead it shows one that looks like it is getting images at flickr:
http://www.fpgbdesign.com/shanghai/expo … sicao.html

i read somewhere, to embed tilt in HTML page, all files must be in the same folder. they are:

exposicao.html
gallery.xml
images
index.php
preferences.txt
readme.html
swfobject.js
thumbs
TiltViewer.swf

do i have to change or add something in the code line?
thank you for your time,
Ana

Re: Embed Tiltviewer into specific HTML area

Hello Steven,

I have just come across with Tilt Viewer and would like to embed the same in my HTML website. Can you please provide me the link to download the code.

Many Thanks,
Surabhi

Re: Embed Tiltviewer into specific HTML area

@AnaB

Try adding the following lines to your embedding code (just above your 'fo.addParam...' line).

fo.addVariable("useFlickr", "false");
fo.addVariable("xmlURL", "gallery.xml");

@wrt2surabhi

The Standard version of TiltViewer can be downloaded from this page: http://simpleviewer.net/tiltviewer/
Just click on the download button.
If you wish to purchase TiltViewer Pro which gives you access to many more options (see here: http://www.simpleviewer.net/tiltviewer/ … tions.html), please see this page: http://simpleviewer.net/tiltviewer/pro/

Steven Speirs
SimpleViewer Support Team.

Re: Embed Tiltviewer into specific HTML area

thanks Steven!

it helps but now this happens (it looks like it is not formatted properly):

http://www.fpgbdesign.com/shanghai/expo … sicao.html

I edited everything using Tilt Pro and i need it to look like this:

http://www.fpgbdesign.com/shanghai/exposicao

again...thank you for your time!
Ana

Re: Embed Tiltviewer into specific HTML area

Try adding the following code:

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

The maxJPGSize option:

Set this value to the largest dimension (width or height) of your largest image. TiltViewer uses this value to proportionately scale your images to fit.

Steven Speirs
SimpleViewer Support Team.

Re: Embed Tiltviewer into specific HTML area

Thanks Steve for your help!

From what I can see, by inserting the Pro Tilt into a specific html area it looses all formatted definitions.

I lost the following properties:

Customize/basic settings:
Background color   
Max image size, px   
Gallery type

Pro settings:
Flipside text color   
Frame width, px   
Zoomed-in distance   
Zoomed-out distance
Tilt amount in   
Tilt amount out   
Title font size
Description font size

I suppose these all have to be formatted again manually?

Thanks for your patience smile
Ana

Re: Embed Tiltviewer into specific HTML area

For each gallery, you should use the following embed code as a template and change the settings to suit your needs:

    <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", "100%", "100%", "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: 
        // [url]http://www.airtightinteractive.com/projects/tiltviewer/config_options.html[/url]
                                                            
        //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("showFlipButton", "true");
        //fo.addVariable("showLinkButton", "true");
        //fo.addVariable("linkLabel", "View image info");
        //fo.addVariable("frameColor", "0xff0000");
        //fo.addVariable("backColor", "0xDDDDDD");
        //fo.addVariable("bkgndInnerColor", "0xFF00FF");
        //fo.addVariable("bkgndOuterColor", "0x0000FF");                
        //fo.addVariable("langGoFull", "Go Fullscreen");
        //fo.addVariable("langExitFull", "Exit Fullscreen");
        //fo.addVariable("langAbout", "About");    
        
        //PRO OPTIONS
        //fo.addVariable("bkgndTransparent", "true");
        //fo.addVariable("showFullscreenOption", "false");
        //fo.addVariable("frameWidth", "40");
        //fo.addVariable("zoomedInDistance", "1400");
        //fo.addVariable("zoomedOutDistance", "7500");
        //fo.addVariable("fontName", "Times");
        //fo.addVariable("titleFontSize", "90");
        //fo.addVariable("descriptionFontSize", "32");
        //fo.addVariable("linkFontSize", "41");
        //fo.addVariable("linkTarget", "_self");
        //fo.addVariable("navButtonColor", "0xFF00FF");
        //fo.addVariable("flipButtonColor", "0x0000FF");
        //fo.addVariable("textColor", "0xFFFFFF");
        //fo.addVariable("linkTextColor", "0x000000");
        //fo.addVariable("linkBkgndColor", "0xFFFFFF");
        //fo.addVariable("enableSounds", "true");
        //fo.addVariable("tiltAmountIn", "75");
        //fo.addVariable("tiltAmountOut", "120");
                
        // END TILTVIEWER CONFIGURATION OPTIONS
        
        fo.addParam("allowFullScreen","true");
        fo.write("flashcontent");            
    </script>

Comment out the lines you do not need by prefixing them with //
If you wish to use a line that is commented out, remove the // from the beginning of the line and change the value of the option.
Descriptions of the options available can be found here: http://www.simpleviewer.net/tiltviewer/ … tions.html

Steven Speirs
SimpleViewer Support Team.

Re: Embed Tiltviewer into specific HTML area

Thanks for your time and patience, Steven!
You've been a great help! wink