• Registered: 2008-05-02
  • Posts: 3

Topic: SimpleViewer w/ Header, Footer

Hi -
I'm also trying to use SimpleViewer within a div box so I can have a different background color behind it, plus a header image. I've been able to get SimpleViewer + header (using Dreamweaver) but I want SimpleViewer (with a purple background) and the purple header to be centered on a black surround. 

In my current set-up, I've found that some browsers aren't allowing people to see the captions (below the thumbnails) and they can't even scroll down - any suggestions?

Otherwise, I've tried centering everything, but it's still hanging to the left. Any suggestions of where I need to change the code in order to get it all centered (so it will appear like index.html, contact.html, etc.)? 

You can check out what I'm talking about at sandynahm dot com in the "Animals" gallery.  Also check out the second "try" at sandynahm dot com slash Animal-SV slash animals2.html  It may help to see what my problem is!  Feels like it's getting so close but, having tried a lot of different things, I'm still having trouble with this fine tuning.

Thanks much!
Meg

  • From: earth
  • Registered: 2008-02-06
  • Posts: 19

Re: SimpleViewer w/ Header, Footer

You can go to your index.html and change the #flashcontent to 80% or something. You have to mess around a bit to get the height you want. Usually, on the html part I just set to 100% height and reduce the flashcontent file to about 80%.

Also, below that you'll see: var fo = new SWFObject("viewer.swf", "viewer", "100%", "100%", "7", "#FFFFFF");

I don't know which one, but you have to change that as well to 80%.  Since I was able to leave mine alone at 100% I forgot which one to change.  The best way to learn is to play around with it.

darrellm's Website

  • Registered: 2007-03-22
  • Posts: 210

Re: SimpleViewer w/ Header, Footer

I don't know about dreamweaver but I do know that you can specify the header and footer and body like this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http&#58;//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!-- saved from url=&#40;0014&#41;about&#58;internet -->
<html xmlns="http&#58;//www.w3.org/1999/xhtml" xml&#58;lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Phillip Norman Photography - Wedding Gallery</title>
<!-- Download SimpleViewer at www.airtightinteractive.com/simpleviewer -->
<script type="text/javascript" src="swfobject.js"></script>
<style type="text/css">    
    /* hide from ie on mac */
    html &#123;
        height&#58; 100%;
        overflow&#58; hidden;
    &#125;
    #flashcontent &#123;
        height&#58; 90%;
    &#125;
    /* end hide */
      #header &#123;
        WIDTH&#58; 100%; BACKGROUND-COLOR&#58; #333333; TEXT-ALIGN&#58; right; PADDING-TOP&#58; 15px; font-family&#58; georgia;
      &#125;
      #footer &#123;
        WIDTH&#58; 100%; BACKGROUND-COLOR&#58; #333333; TEXT-ALIGN&#58; right; PADDING-TOP&#58; 10px; PADDING-BOTTOM&#58; 5px; font-family&#58; georgia;
      &#125;
    body &#123;
        height&#58; 100%;
        margin&#58; 0;
        padding&#58; 0;
        background-color&#58; #333333;
        color&#58;#ffffff;
    &#125;
</style>
</head>
<body>
      <div id=header><a href="http&#58;//www.phillipnorman.com" target="_blank" onmouseover="style.color='white'" onmouseout="style.color='#999999'" style="text-decoration&#58;none;color&#58;#999999;font-size&#58;13px;position&#58;relative;left&#58;-10px;"><b><i>Phillip Norman Photography</i> - Home</b></a></div>
    <div id="flashcontent">SimpleViewer requires Macromedia Flash. <a href="http&#58;//www.macromedia.com/go/getflashplayer/">Get Macromedia Flash.</a> If you have Flash installed, <a href="index.html?detectflash=false">click to view gallery</a>.</div>    
    <script type="text/javascript">
        var fo = new SWFObject&#40;"viewer.swf", "viewer", "100%", "100%", "8", "#333333"&#41;;    
        fo.addVariable&#40;"preloaderColor", "0xffffff"&#41;;
        fo.addVariable&#40;"xmlDataPath", "gallery.xml"&#41;;    
        fo.write&#40;"flashcontent"&#41;;    
    </script>    
      <div id=footer><a href="/contact.php" onmouseover="style.color='white'" onmouseout="style.color='#999999'" style="text-decoration&#58;none;color&#58;#999999;font-size&#58;13px;position&#58;relative;left&#58;-10px;"><b>Contact</b></a></div>
</body>
</html>
Regards
Phil
http://www.phillipnorman.com