Topic: Tiltviewer with Iweb

I've been struggling for days now and tried so many combinations, I've seen that there are so many posts in this forum where people have similar issues.
Could someone describe the process required for setting up Tilt viewer on an iweb built website.

I've amended the index.html script to pull my flickr photos....and still doesn't work from the html snippet.

what files from the tiltviewer download need to be placed on my server, and what need to be changed apart from the index.html?

on iWeb what html code needs to be used to pull tiltviewer and my photos?

many thanks, and sorry to be a pain, but I do have a basic notion of script and servers, but this is mind boggling! smile

cheers

Re: Tiltviewer with Iweb

Please follow the instruction for 'Embedding with iWeb' here: http://simpleviewer.net/simpleviewer/su … .html#iweb
The instructions are in the SimpleViewer section but are relevant for all viewers.
Just create a TiltViewer gallery with the method of your choice and keep all the gallery files together in a single folder.
Then, follow steps 2) onwards.

Steven Speirs
SimpleViewer Support Team.

Re: Tiltviewer with Iweb

Thanks Steven, reckon we're almost there, but not quite....the iWeb html snippet still throws up a blank page when I've followed all the steps.
I have the latest flash, flickr photos are all public.

I edited the index.html to the following:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>TiltViewer</title>
<script type="text/javascript" src="swfobject.js"></script>
<style type="text/css">   
    /* hide from ie on mac \*/
    html {
        height: 100%;
        overflow: hidden;
    }
   
    #flashcontent {
        height: 100%;
    }
    /* end hide */

    body {
        height: 100%;
        margin: 0;
        padding: 0;
        background-color: #000000;
        color:#ffffff;
        font-family:sans-serif;
        font-size:40;
    }

    a {   
        color:#cccccc;
    }
</style>
</head>
<body>
    <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:
        // http://www.airtightinteractive.com/proj … tions.html
                                                           
        // FLICKR GALLERY OPTIONS
        // To use images from Flickr, uncomment this block
        fo.addVariable("useFlickr", "true");
        fo.addVariable("user_id", "42788502@N05");
        fo.addVariable("tags", "showcase");
        fo.addVariable("tag_mode", "any");
        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");               
       
        // END TILTVIEWER CONFIGURATION OPTIONS
       
        fo.addParam("allowFullScreen","true");
        fo.write("flashcontent");           
    </script>   
</body>
</html>

************

I added "showcase" to 25 of my flickr images on flickr, and then uploaded my tiltviewer folder to my server as follows:

1) imgs (folder) with the 25 flickr images and thumbs.db
2) gallery.xml
3) index.html (edited as per above)
4) readme.html
5) swobject.js
6)TiltViewer.swf

************

I then added the following into my html snippet on iWeb

<iframe src="http://www.aimeehart.co.uk/tiltviewer/" width="800" height="600" frameborder="0" scrolling="no"></iframe>

Is there anything with the above that you suggest I change? Many thanks in advance, I can see you have had many people ping over the same or similar issues....your reply is REALLY appreciated trust me!!


Thanks  smile

Re: Tiltviewer with Iweb

PS - just to follow up that neither pictures nor tiltviewer are coming up... sad

Re: Tiltviewer with Iweb

If using Flickr as a source of images for your gallery, you need to comment out the XML Gallery Options by changing:

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

... to:

//fo.addVariable("useFlickr", "false");
//fo.addVariable("xmlURL", "gallery.xml");
//fo.addVariable("maxJPGSize","640");
Steven Speirs
SimpleViewer Support Team.

Re: Tiltviewer with Iweb

Hi Steve,

I've done so and still nothing appearing - so frustrating because these steps aren't complicated...I just can't understand why its not picking up the flickr gallery ... any more suggestions please?!

1) <iframe src="http://www.aimeehart.co.uk/mygallery/index.html/" width="800" height="600" frameborder="0" scrolling="no"></iframe>

2)
<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", "42788502@N05");
fo.addVariable("tags", "showcase");
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>

Re: Tiltviewer with Iweb

....furthermore I tried to go the simpleviewer route and followed all the steps from creating the gallery extract from flickr with sv builder to uploading the whole contents to my webs server, I entered in the following to my html snippet:

<iframe src="http://www.aimeehart.co.uk/simple/" width="800" height="600" frameborder="0" scrolling="no"></iframe>

and get the following

Not Found

The requested URL /simple/ was not found on this server.

Additionally, a 404 Not Found error was encountered while trying to use an ErrorDocument to handle the request.


.....proving not so "simple"...please help  sad 

many thanks

Re: Tiltviewer with Iweb

Your TiltViewer settings are fine. I have used them in a test gallery and your images are displayed OK.
The <iframe> code in your second last post is as follows http://www.aimeehart.co.uk/mygallery/index.html/
The trailing slash implies that 'index.html' is a directory and a browser will be looking for http://www.aimeehart.co.uk/mygallery/index.html/index.html
You should use http://www.aimeehart.co.uk/mygallery/index.html
However, this page does not seem to exist.
The problem seems to be with the location of your uploaded files.
What is the URL of the page into which you would like to embed the gallery?
What is the URL of the gallery folder?

Edit:
I notice that you have successfully embedded a TiltViewer gallery on the page: http://aimeehart.co.uk/Aimee_Hart_photography.html
However, the gallery has a very small height. Try using absolute pixel values rather than percentages for the dimensions of your <iframe>.

Steven Speirs
SimpleViewer Support Team.

Re: Tiltviewer with Iweb

Hi Steven

Yup, thanks for the response, I got it working by moving the files in the public section of my webserver. 

Many thanks again for your support. Really happy with this now!

Happy NY and alalujah!