Topic: Using Flickr on webserver but Images not Showing...

So I uploaded the photos that I want to use to Flickr and followed the instructions from the Tilt Viewer site on how to setup the html document so it pulls those photos into Tilt Viewer. After that, I put the html document on a webserver as it says to do but when I open the page, blank squares appear... Any suggestions on what the problem may be?

Here is the link to the webpage : http://jwportfolio.me/

And here is the source code:

<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>Portfolio of Justin Wilkinson</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
        //fo.addVariable("useFlickr", "true");
        //fo.addVariable("user_id", "46424798@N08");
        //fo.addVariable("tags", "Portfolio");
        //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>

Re: Using Flickr on webserver but Images not Showing...

You need to remove the // from the beginning of these lines:

        //FLICKR GALLERY OPTIONS
        //fo.addVariable("useFlickr", "true");
        //fo.addVariable("user_id", "46424798@N08");
        //fo.addVariable("tags", "Portfolio");
        //fo.addVariable("tag_mode", "any");
        //fo.addVariable("showTakenByText", "true");

The // signifies that the line is a comment and will be ignored when parsed by the browser.
You also need to comment out (or remove) the other instance of the useFlickr option here:

        // XML GALLERY OPTIONS
        // To use local images defined in an XML document, use this block       
        fo.addVariable("useFlickr", "false");
Steven Speirs
SimpleViewer Support Team.

Re: Using Flickr on webserver but Images not Showing...

Hey thanks!... I now have a new problem lol. Now Im getting "Tiltviewer requires javascript and latest version of Flash Player." Any suggestions? I have the javascript file in the same folder as the html document if that helps.

Re: Using Flickr on webserver but Images not Showing...

Do you have the file TiltViewer.swf in the same folder as the HTML file?  It should be there but looks like it might not be.

Also, you still need to remove the fo.addVariable("useFlickr", "false"); line which comes after your fo.addVariable("useFlickr", "true"); line.

Steven Speirs
SimpleViewer Support Team.

Re: Using Flickr on webserver but Images not Showing...

OK so I did what you suggested in your last comment and Im still getting the "Tilt viewer requires flash" message. Any other suggestions? Below is an updated look at the html. See any flaws?

<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>Portfolio of Justin Wilkinson</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
        fo.addVariable("useFlickr", "true");
        fo.addVariable("user_id", "46424798@N08");
        fo.addVariable("tags", "Portfolio");
        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>

Re: Using Flickr on webserver but Images not Showing...

Sorry.  I should have been more specific.
The lines:

FLICKR GALLERY OPTIONS

... and

XML GALLERY OPTIONS

... are comments rather than lines of code and should be preceeded by //

Edit:
You should also use a DOCTYPE Declaration.
Put the following code at the very beginning of your HTML page:

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

Last edited by Steven Speirs (2010-09-23 10:52:31)

Steven Speirs
SimpleViewer Support Team.

Re: Using Flickr on webserver but Images not Showing...

That did it! Thank you so much Steven! I'm not a web guy, just a graphic designer. I really appreciate you taking the time to explain things to me until I got it right. Thanks again and I love what you guys are doing for sure!

Justin

Re: Using Flickr on webserver but Images not Showing...

In the lower left corner of "http://jwportfolio.me/" is shown something red like "JUSTIN WILKINSON". Is this text or a picture?

Or the link to a picture, which looks like a text?

Re: Using Flickr on webserver but Images not Showing...

The 'text' is actually part of the main image.

Steven Speirs
SimpleViewer Support Team.