Topic: Tiltviewer not functioning properly


I have embedded the TiltViewer image gallery. here is the link:

Now, here are some issues that I am facing:

1. comparing this link to the size of the image thumbnails is larger on my website and also the gap between the thumbnails is more than the demo link.
2. Images on my website are of different sizes but are larger than they are currently appearing when you move to the full screen version. however, on the demo link, the image size is bigger. Is there a way to get the full size of the image once i click on it or at least somewhat bigger. I earlier had a light box image gallery which gave me the option to see the full size of the image. Is there a way to get the same in this, or at least similar to the app demo link so that the images can be clearer.
3. On the left and top side of the screen, there is a white margin appearing, how to get rid of it.
4. On the top of the page, I need to insert two links, like contacts Us or Back to Home, etc. How do i do that?
5. I have set the flip option value to False but it still shows the flip option. Please help.
6. Now all of a sudden, the images do not appear  :(

Here is the code that i have put on this HTML page:

<script type="text/javascript" src="swfobject.js"></script>
<div id="flashcontent">TiltViewer requires JavaScript and the latest Flash player. <a href="">Get Flash here.</a></div>
    <script type="text/javascript">
        var fo = new SWFObject("TiltViewer.swf", "viewer", "100%", "100%", "9.0.28", "#000000");           
        // To use an option, uncomment it by removing the "//" at the start of the line
        // For a description of config options, go to:
        // … tions.html
        // To use images from Flickr, uncomment this block
        //fo.addVariable("useFlickr", "false");
        //fo.addVariable("user_id", "48508968@N00");
        //fo.addVariable("tags", "jump,smile");
        //fo.addVariable("tag_mode", "all");
        //fo.addVariable("showTakenByText", "true");           
        // To use local images defined in an XML document, use this block       
        fo.addVariable("useFlickr", "false");
        fo.addVariable("xmlURL", "gallery.xml");
        //GENERAL OPTIONS       
        fo.addVariable("useReloadButton", "true");
        fo.addVariable("columns", "6");
        fo.addVariable("rows", "6");
        //fo.addVariable("showFlipButton", "false");
        //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");               

I thank you very much in advance for the help and cooperation.

Would be waiting eagerly for your response.

Many thanks,

Re: Tiltviewer not functioning properly

Your portfolio.html page is not a complete HTML page.  It contains only the embedding code.
An HTML page required a Doctype Declaration, <html> tags, a <head> section and a <body> section.
Take a look at the index.html page in the 'web' folder of your TiltViewer download.
You can use this as a template and just change the options to suit your needs.

Steven Speirs
SimpleViewer Support Team

Re: Tiltviewer not functioning properly

Hello Steven,

Thank you very much for the reply.

I have now added the HTML code and the main menu bar of the website. But something seems to be still wrong. Also, i am not sure why its doesn't show the images that i have added to the gallery.xml file. It was working fine though.

The other points like the thumbnail size, image size, gap between the two image thumbnails etc are still as it is.

As you suggested i have added the HTML tag and kindly let me know what could be done now.

The link is

Thanks you very much for all your help.

Warm Regards,

Re: Tiltviewer not functioning properly

The gap between the thumbnails is caused by your use of images with very different aspect ratios.  You have some square images and others that are very tall and thin.  You have set the maxJPGSize 'correctly' but the spacing between images is uniform and although the large maxJPGSize allows for a little space surrounding the tall thin images, it results in much more space surrounding the square images.
Other than using images of a similar aspect ratio to each other, you could try reducing the maxJPGSize.  The square images would come closer together but the tall thin images might start to overlap neighboring images.

You can make the zoomed out images larger by use of the zoomedOutDistance option (TiltViewer Pro only). … s.html#pro
(There is also a corresponding zoomedInDistance option.)

To disable the showFlipButton, you need to remove the leading // from the corresponding line in your code.  (The // comments out the line and is it then ignored by the browser.)

In order to add links to a page, take a look at the 'Using a Resizable Gallery with a Header' example here. … l#multiple
The example is for SimpleViewer but the principle is the same.

You should still use a Doctype Declaration at the top of your document.
Put the following code at the very beginning of the page before your <html xmlns="" xml:lang="en" lang="en"> tag.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
Steven Speirs
SimpleViewer Support Team

Re: Tiltviewer not functioning properly

Hi Steven,

Thank you for the reply.

I did these changes and changing resolution of some images did help and as such the gallery worked, but now when i add the menu bar and then enter the tiltviewer code, the gallery doesn't work as it did last time.

Your help would be highly appreciated.

Many thanks,

Re: Tiltviewer not functioning properly

You are missing 3 closing </div> tags.

<div id="flashcontent">This page requires JavaScript and the latest Flash player. <a href="">Get Flash here.</a></div>

... with:

</div></div><div id="flashcontent">This page requires JavaScript and the latest Flash player. <a href="">Get Flash here.</a></div></div>

Also, you have a missing > in line 46. Replace this line:

<li><a href="about.html"<span>About</span></a></li>

... with:

<li><a href="about.html"><span>About</span></a></li>

Then, ensure that all parent containers of your 'flashcontent' div have a height specified in CSS.
'flashcontent' is in <div class="main"> so you could try :

<div class="main" style="height: 100%;">
Steven Speirs
SimpleViewer Support Team