Topic: Tiltviewer with Flickr (or Photoshop)

Hi,
I've been rooting through all of the forums to find an answer to my problem but don't seem able to find one in non jargon-ie language. I have downloaded the tiltviewer software as per the "using Photoshop" instructions... I have CS5. I have installed it and I have managed to run the script and designed the tiltviewer gallery. All fantastic and it looks great! That seems to be where your instructions end. I have used iWeb09 to build my site and I want to be able to have it in my website. Perhaps a button could be clicked to open this tiltviewer gallery? Perhaps it can be within one of my own designed web pages? At the moment, I don't seem to be able to get it on my site.

Do I then go on to stage 7 of the "support home" page? This is called "embedding in a HTML Page". If so, I have no idea where I have to "Copy the entire contents of your TiltViewer gallery folder into the folder that contains your HTML page (including the swfobject.js file)". Where and what is that? I'm guessing thats something to do with my FTP space I have with the company that I use for uploading my website?

I am very new to all this and do not understand the jargon used in web design forums. I am learning but I think I need it put into English. My web site is http://www.steveburrowsimages.com  I am in the process of designing a photography site. I have got a bunch of jpegs to use which show on my system but not on the net.

Please help - I have no idea...

Steve

Last edited by SteveBurrows (2011-05-05 17:20:19)

Re: Tiltviewer with Flickr (or Photoshop)

If you have created a TiltViewer gallery with Photoshop, then you will have a self-contained gallery in a single folder and should be able to view the gallery by opening the gallery's HTML index page in a browser.
Perhaps the easiest method to embed this gallery in a web page would be to:
(1) Upload the entire gallery folder to your web host (perhaps to the root directory of your web space) using an FTP program such as Filezilla
(2) Embed the gallery in an existing page by adding an <iframe> via a single line of code:

<iframe src="http://www.example.com/gallery_folder/index.html" width="800" height="600" frameborder="0" scrolling="no"></iframe>
Steven Speirs
SimpleViewer Support Team.

Re: Tiltviewer with Flickr (or Photoshop)

hello again

i have followed the instructions of uploading the folder to justhost with filezilla. i put an html snippet into the weddings page (i am using iweb09) with the iframe text that you gave me. i can see the files in my cpanel so i must have uploaded them. if i view the site at http://www.steveburrowsimages.com and go to weddings screen from the button on the left, i get a rectangle with i would describe as an advert for iana.

i must have done something wrong.

i also do have a flickr account - how do i resolve this?

Regards

Steve

Last edited by SteveBurrows (2011-05-05 12:17:27)

Re: Tiltviewer with Flickr (or Photoshop)

ok - I have also tried to do a flickr version now. the photoshop version seems messy. i have set up a set of public pics on flickr. i have  downloaded tiltviewer again and adjusted the code as per instructions. i uploaded the adjusted code to my public_html file. and i inserted a snippet with iweb09 and also put the embedding code into that. the code on the snippet and the uploaded version are the same. i get the warning that javescript and adobe flash are needed. if you view my website's HOME PAGE i have revealed a set of links - there is one called wedding examples - thats where i want it - on that page. i will create a link button later from the wedding page.

here is the code for you to have a look at.

<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_code_set--><script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-18108020-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script><!--/head_code_set--><meta name="robots" content="follow,index"></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", "60641322@N03");
        fo.addVariable("tags", "wedding examples");
        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");               
       
        // END TILTVIEWER CONFIGURATION OPTIONS
       
        fo.addParam("allowFullScreen","true");
        fo.write("flashcontent");           
    </script>   
<!--code_set--><!-- Start of StatCounter Code -->
<script type="text/javascript">
var sc_project=6321420;
var sc_invisible=0;
var sc_security="93cf8cb1";
</script>

<script type="text/javascript"
src="http://www.statcounter.com/counter/counter.js"></script><noscript><div
class="statcounter"><a title="statistics in vBulletin"
href="http://statcounter.com/vbulletin/"
target="_blank"><img class="statcounter" src="http://c.statcounter.com/6321420/0/93cf8cb1/0/" alt="statistics in vBulletin"></a></div></noscript>
<!-- End of StatCounter Code --></body>
</html>

thanks in advance

regards

steve

Last edited by SteveBurrows (2011-05-05 16:34:10)

Re: Tiltviewer with Flickr (or Photoshop)

At the moment, your HTML page has no line breaks and the code appears all on one continuous line:

<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/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", "5");        fo.addVariable("rows", "5");        //fo.addVariable("showFlipButton", "true");        //fo.addVariable("showLinkButton", "true");        //fo.addVariable("linkLabel", "View image info");        fo.addVariable("frameColor", "0xFFFFFF");        fo.addVariable("backColor", "0xFFFF00");        fo.addVariable("bkgndInnerColor", "0x333333");        fo.addVariable("bkgndOuterColor", "0x000000");        //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>

Each line of HTML and JavaScript code should be on a separate line (with a line feed at the end).
This is the likely cause that your current gallery is not being displayed.

Steven Speirs
SimpleViewer Support Team.

Re: Tiltviewer with Flickr (or Photoshop)

hi

like i said - i am a newbie to all this.

i get what you are saying but how am i supposed to know where to create the new lines?

steve

Re: Tiltviewer with Flickr (or Photoshop)

I don't know at which point in the process the line feeds are being stripped out of your code but if you were to copy and paste the code you posted above into a blank text document in a plain text editor, name the file 'index.html' and upload it using a standard FTP program (overwriting the existing file located at http://www.steveburrowsimages.com/index.html) then hopefully the line breaks (from the copying and pasting action) will remain.

Steven Speirs
SimpleViewer Support Team.

Re: Tiltviewer with Flickr (or Photoshop)

Did as you said. Copied my code back into "textwrangler" on the mac (copied and pasted it there). I know that there are a lot of settings you can choose but i have left textwrangler as is.

uploaded it

still nothing

steve

Re: Tiltviewer with Flickr (or Photoshop)

just had a thought - where its looking for tags on my flickr site i have entered "wedding examples" i am looking at the text and wondered if I should enter "wedding_examples" or "wedding,examples". on flickr it says that if you want more than one word in a tag then enter it in double quotes ie "two words"

steve

Re: Tiltviewer with Flickr (or Photoshop)

Looks like you've got it working now - with the Flickr tags, too.

Steven Speirs
SimpleViewer Support Team.

Re: Tiltviewer with Flickr (or Photoshop)

well, of a sort. however, it replaced my welcome page with the gallery. I had to speak to my web hosting company as its a mess. got my home page back now. apparently (and please bear in mind that i know very little), it was because it had been named index.html and had replaced the index file in my root folder. the file that pointed to the home page.

i have had to undo this with their help. i also had to do a lot of other clearing up. If you take a look at my site, i have created a page (the link is in the weddings page and also at the bottom in green). I don't know whether to have it there or in a separate window. Please look at all of my points and give me your thoughts.

I am back to square one since having to get rid of it.

Regards

Steve

Re: Tiltviewer with Flickr (or Photoshop)

If your replaced the 'index.html' file in the root of your web space, then it sounds like you copied the contents of your gallery folder to the root, not the actual folder itself.
You should have the gallery folder located alongside your original 'index.html' file.
Ensure you upload the gallery folder to the root of your web space and try my suggestion from a few posts above.
(This one: http://www.simpleviewer.net/forum/viewt … 82#p35482)

Steven Speirs
SimpleViewer Support Team.

Re: Tiltviewer with Flickr (or Photoshop)

At the moment, it looks like the 'swfobject.js' and 'TiltViewer.swf' files are missing from the 'Wedding_Gallery_files' folder.

Steven Speirs
SimpleViewer Support Team.

Re: Tiltviewer with Flickr (or Photoshop)

i have followed instructions that help reduce the length of url's and that includes saving straight to the root folder (as i understand it).

i think you are right, i did upload the contents to the public.html folder which i think means the root folder. so where should i upload it to? are you saying that the folder that is created (named tiltviewer if i remember) should be uploaded to the root folder?

i don't understand what your further post means regarding missing files as i don't know how to get them again and then, where to put them

steve

Re: Tiltviewer with Flickr (or Photoshop)

are you saying that the folder that is created (named tiltviewer if i remember) should be uploaded to the root folder?

Yes.  That way, all the gallery files will be together in a folder and there will be no chance of any files with duplicate names existing in the same folder. (Each file will have its own unique path.)
This would only be required if you were to start from scratch and try my <iframe> suggestion.

However, you have a nearly-working gallery which seems to be lacking only 2 files ('swfobject.js' and 'TiltViewer.swf') in the correct location.
The gallery shows up at: http://www.steveburrowsimages.com/Wedding_Gallery.html because iWeb is including the complete gallery in your page.
However, the HTML page into which the gallery's SWF file is embedded is:
http://www.steveburrowsimages.com/Wedding_Gallery_files/widget0_markup.html
The missing files ('swfobject.js' and 'TiltViewer.swf') should be located alongside the 'widget0_markup.html' file in the 'Wedding_Gallery_files' folder. (You can find these files in the TiltViewer download package.)

Steven Speirs
SimpleViewer Support Team.

Re: Tiltviewer with Flickr (or Photoshop)

I think I have sorted it now.

I have decided to go for a link button which takes you to a new window rather than it being embedded in a page.

I worked out what you were saying eventually. i noticed that in my public folder "public.html" there were a bunch of folders and these all had the same names as my web pages, so i did a new install of tiltviewer which created a new folder called tiltviewer with all the files inside. i then uploaded this to the same level as all of the other folders. i tested it by entering the url http://www.steveburrowsimages.com/tiltviewer and hey presto! - it appeared. so then i created a button on the weddings page and did a hyperlink from this to an external web page and entered this url. I just have to put all the other text in now. Have a look at the weddings page and click the link. forget about the weddings gallery button at the bottom - i will get this to do the same as the other button instead.

i am going to do the same for my portraits page and other pages too. however, i will name these folders tiltviewer2, tiltviewer3 and so on and have links from a button on the respective pages.

Did I do correctly? Did I explain myself clearly?

Thanks for your help

Please let me know if you think i could do it in a better way

Steve

Last edited by SteveBurrows (2011-05-06 20:09:46)

Re: Tiltviewer with Flickr (or Photoshop)

With a working gallery at http://www.steveburrowsimages.com/tiltviewer, all you would need to do to actually have the gallery displayed within the 'Weddings' page itself is to replace your 'Site undergoing maintenance...' message with the following code:

<iframe src="http://www.steveburrowsimages.com/tiltviewer/index.html" width="800" height="600" frameborder="0" scrolling="no"></iframe>

You may need to change the width and height of the <iframe> to suit your page.

Steven Speirs
SimpleViewer Support Team.