Topic: Simpleviewer Gallery using Flickr

Hi there,
trying to get my website to load the gallery from my Flickr account but all it shows is a blank white square.
Tried to trouble shoot and look to see that all the height width correlate (the CSS thing) but still the blank screen.
I also opened the the "activity" feed in my safari browser and it said my swf file was not found - but I double checked to see it was in the place in which I ftp'd it, which it was. So now I'm stumped? Any suggestions greatly appreciated!

Here's my code
<!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">
<head>
<title>P & H Fine Foods</title>
<!-- Location of javascript. -->
<script language="javascript" type="text/javascript" src="swfobject.js"></script>
<style type="text/css">
<!--

#navbar ul {
        margin: 0;
        padding: 5px;
        list-style-type: none;
        text-align: center;
        background-color: #000;
        }

#navbar ul li { 
        display: inline;
        }

#navbar ul li a {
        text-decoration: none;
        padding: .2em 1em;
        color: #fff;
        background-color: #000;
        }

#navbar ul li a:hover {
        color: #000;
        background-color: #fff;
        }
body,td,th {
    border-top-width: 600px;
    border-top-style: none;
    color: #C93;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
}
body {
    background-color: #000;
    text-align: center;
}
#apDiv1 {
    position:absolute;
    width:393px;
    height:175px;
    z-index:1;
    left: 261px;
    top: 295px;
    font-family: Arial, Helvetica, sans-serif;
    text-align: left;
}
#apDiv2 {
    position:absolute;
    width:390px;
    height:159px;
    z-index:2;
    left: 261px;
    top: 493px;
    font-family: Arial, Helvetica, sans-serif;
    text-align: left;
}
#apDiv1 p {
    font-size: 10px;
}
#apDiv1 p {
    font-size: 12px;
}
#apDiv3 {
    position:absolute;
    width:240px;
    height:250px;
    z-index:1;
    left: 106px;
    top: 336px;
    text-align: left;
    color: #FFF;
}
#apDiv4 {
    position:absolute;
    width:240px;
    height:250px;
    z-index:2;
    left: 369px;
    top: 340px;
    text-align: left;
    color: #FFF;
}
#apDiv5 {
    position:absolute;
    width:240px;
    height:250px;
    z-index:1;
    left: 270px;
    top: 3px;
}
h1 {
    font-size: 12px;
    color: #FFF;
}
h2 {
    font-size: 11px;
    color: #C93;
}
.container {
    background-image: url(../images/RSSfeed_facebook.png);
    background-repeat: no-repeat;
    background-position: 400px 200px;
}

-->
</style>
</head>
<body onload="MM_preloadImages('../images/Buttons/Rollovers/Home_rollover.jpg','../images/Buttons/Rollovers/About_rollover.jpg','../images/Buttons/Rollovers/Ourproducts_rollover.jpg','../images/Buttons/Rollovers/Contact_rollover.jpg')">
<div id="navbar">
  <ul>
    <li></li>
    <li></li>
    <li></li>
    <li></li>
    <a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Home ','','../images/Buttons/Rollovers/Home_rollover.jpg',1)"><img src="../images/Buttons/Original/Home.jpg" alt="Home" name="Home " width="200" height="70" border="0" id="Home " /></a><a href="about.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('About','','../images/Buttons/Rollovers/About_rollover.jpg',1)"><img src="../images/Buttons/Original/about.jpg" alt="About" name="About" width="200" height="70" border="0" id="About" /></a><a href="ourproducts.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Our products','','../images/Buttons/Rollovers/Ourproducts_rollover.jpg',1)"><img src="../images/Buttons/Original/ourproducts.jpg" alt="Our products" name="Our products" width="200" height="70" border="0" id="Our products" /></a><a href="contact.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Contact','','../images/Buttons/Rollovers/Contact_rollover.jpg',1)"><img src="../images/Buttons/Original/contact.jpg" alt="Contact" name="Contact" width="200" height="70" border="0" id="Contact" /></a>
  </ul>
  <div align="center"></div>
</div>
<div>
  <p>&nbsp;</p>
  <p>&nbsp;</p>
  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="800" height="600" id="FlashID" title="simpleviewer">
    <param name="movie" value="web/svcore/swf/simpleviewer.swf" />
    <param name="quality" value="high" />
    <param name="wmode" value="opaque" />
    <param name="swfversion" value="9.0.45.0" />
    <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don’t want users to see the prompt. -->
    <param name="expressinstall" value="../Scripts/expressInstall.swf" />
    <param name="gallery.xml" value="index.html/gallery.xml"/>
    <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. -->
    <!--[if !IE]>-->
    <object type="application/x-shockwave-flash" data="web/svcore/swf/simpleviewer.swf" width="800" height="600">
      <!--<![endif]-->
      <param name="quality" value="high" />
      <param name="wmode" value="opaque" />
      <param name="swfversion" value="9.0.45.0" />
      <param name="expressinstall" value="../Scripts/expressInstall.swf" />
      <param name="gallery.xml" value="index.html/gallery.xml" />
      <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. -->
      <div>
        <h4>Content on this page requires a newer version of Adobe Flash Player.</h4>
        <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p>
      </div>
      <!--[if !IE]>-->
    </object>
    <!--<![endif]-->
  </object>
  <!--START SIMPLEVIEWER EMBED -->
<script type="text/javascript" src="svcore/js/simpleviewer.js"></script>
<script type="text/javascript">
var flashvars={};
flashvars.galleryURL = "gallery.xml";
simpleviewer.ready(function () {
simpleviewer.load('sv-container', '800px', '600px', '000000', true, flashvars);
});
</script>
<div id="sv-container"></div>
<!--END SIMPLEVIEWER EMBED -->
<p>&nbsp;</p>
</div>
<div id="_banner"></div>
<div align="center">
 
</div>
<div>
          <div id="flashContent">
            <div align="center">SimpleViewer requires JavaScript and the Flash Player.
              <a href="http://www.adobe.com/go/getflashplayer/">Get Flash.</a></div>
  </div>
          <div align="center">          Powered by<a href="http://www.flash-gallery.org">Flash Gallery</a>
            <!--[if !IE]>-->
     <!--<![endif]-->   
            </object>
            </p>
          </div>
  <p>&nbsp;</p>
</div>
<script type="text/javascript">
swfobject.registerObject("FlashID");
swfobject.registerObject("FlashID");
swfobject.registerObject("FlashID");
</script>
</body>
</html> 

And here is my XML sheet:

<?xml version="1.0" encoding="UTF-8"?>

<simpleviewergallery
   
    galleryStyle="MODERN"
    title="SimpleViewer Gallery"
    textColor="FFFFFF"
    frameColor="FFFFFF"
    frameWidth="20"
    thumbPosition="LEFT"
    thumbColumns="3"
    thumbRows="3"
    showOpenButton="TRUE"
    showFullscreenButton="TRUE"   
    maxImageWidth="800"
    maxImageHeight="640"
    useFlickr="TRUE"
    flickrUserName="phfinefoods"
    flickrTags=""
    languageCode="AUTO"
    languageList=""       
    imagePath="images/"
    thumbPath="thumbs/"
   
>

</simpleviewergallery>

Thanks so much!

Re: Simpleviewer Gallery using Flickr

Depending on the location of your 'swfobject.js' file, you may need to change:

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

.. to:

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

... judging by the relative path to your 'simpleviewer.swf' file and assuming you have kept the 'svcore' folder intact.
If you continue to experience difficulties, please post the URL to your web page so that I can take a look.

Also, if you would like to take advantage of SimpleViewer's Universal Playback functionality (whereby the gallery will be displayed by the Mobile Player on mobile devices and in browsers which do not have Adobe Flash Player installed and enabled), you should use the recommended embedding code found here.

Steven Speirs
SimpleViewer Support Team.