Topic: Putting a title bar above simpleviewer gallery

Hello,

I would like to add a title bar above my simpleviewer gallery. More specifically, rollover images/links above my gallery.

Here is the page: http://www.keatonjohnson.com/photo

I added a table with the rollover images in it above the simpleviewer script, however it does not appear on the page. Here is 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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Photo</title>
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
</script>
</head>

<body onload="MM_preloadImages('file:///C|/Users/Keaton/Desktop/keatonjohnson.com/HOME rollover.png','file:///C|/Users/Keaton/Desktop/keatonjohnson.com/ABOUT rollover.png','file:///C|/Users/Keaton/Desktop/keatonjohnson.com/BLOG rollover.png','file:///C|/Users/Keaton/Desktop/keatonjohnson.com/CONTACT rollover.png')">
<table width="200" border="0" align="center">
  <tr>
    <th scope="col"><a href="http://www.keatonjohnson.com" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image1','','file:///C|/Users/Keaton/Desktop/keatonjohnson.com/HOME rollover.png',1)"><img src="file:///C|/Users/Keaton/Desktop/keatonjohnson.com/HOME.png" name="Image1" width="134" height="37" border="0" id="Image1" /></a></th>
    <th scope="col"><img src="file:///C|/Users/Keaton/Desktop/keatonjohnson.com/seperator.png" width="5" height="45" /></th>
    <th scope="col"><a href="http://www.keatonjohnson.com/about" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','file:///C|/Users/Keaton/Desktop/keatonjohnson.com/ABOUT rollover.png',1)"><img src="file:///C|/Users/Keaton/Desktop/keatonjohnson.com/ABOUT.png" name="Image3" width="162" height="37" border="0" id="Image3" /></a></th>
    <th scope="col"><img src="file:///C|/Users/Keaton/Desktop/keatonjohnson.com/seperator.png" width="5" height="45" /></th>
    <th scope="col"><a href="http://www.keatonjohnson.com/blog" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','file:///C|/Users/Keaton/Desktop/keatonjohnson.com/BLOG rollover.png',1)"><img src="file:///C|/Users/Keaton/Desktop/keatonjohnson.com/BLOG.png" name="Image5" width="116" height="37" border="0" id="Image5" /></a></th>
    <th scope="col"><img src="file:///C|/Users/Keaton/Desktop/keatonjohnson.com/seperator.png" alt="" width="5" height="45" /></th>
    <th scope="col"><a href="http://www.keatonjohnson.com/contact" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image7','','file:///C|/Users/Keaton/Desktop/keatonjohnson.com/CONTACT rollover.png',1)"><img src="file:///C|/Users/Keaton/Desktop/keatonjohnson.com/CONTACT.png" name="Image7" width="231" height="37" border="0" id="Image7" /></a></th>
  </tr>
</table>
<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: #181818;
        color:#ffffff;
        font-family:sans-serif;
        font-size:40;
    }    
    a {    
        color:#cccccc;
    }
</style>
<body>
<script type="text/javascript" src="swfobject.js"></script>
<div id="flashcontent">AutoViewer requires JavaScript and the Flash Player. <a href="http://www.macromedia.com/go/getflashplayer/">Get Flash here.</a> </div>
<script type="text/javascript">
var fo = new SWFObject("simpleviewer.swf", "viewer", "100%", "100%", "8", "#666");
//Optional Configuration
//fo.addVariable("langOpenImage", "Open Image in New Window");
//fo.addVariable("langAbout", "About");
//fo.addVariable("xmlURL", "gallery.xml");
fo.write("flashcontent");
</script>
</body>
</html>

Re: Putting a title bar above simpleviewer gallery

Your page have the following line of code:

<body onload="MM_preloadImages('file:///C|/Users/Keaton/Desktop/keatonjohnson.com/HOME rollover.png','file:///C|/Users/Keaton/Desktop/keatonjohnson.com/ABOUT rollover.png','file:///C|/Users/Keaton/Desktop/keatonjohnson.com/BLOG rollover.png','file:///C|/Users/Keaton/Desktop/keatonjohnson.com/CONTACT rollover.png')">

The locations of the images are given as local paths on your computer's hard drive, to which viewers of your web page have no access.
The images should be uploaded to your web server and the locations should be given as relative paths (relative to the HTML document) or as absolute paths (in the form http://www.example.com/images/image.jpg).
You may also find the 'Using a Resizable Gallery with a Header' section of the 'SimpleViewer Embedding Guide' useful:
http://simpleviewer.net/simpleviewer/su … #resizable

Steven Speirs
SimpleViewer Support Team.

Re: Putting a title bar above simpleviewer gallery

Done, however the title bar still isn't loading correctly.

http://www.keatonjohnson.com/photo

You can see it kind of load when you first open the page..

Re: Putting a title bar above simpleviewer gallery

It looks like your images are still not in the correct locations.
As en example, you have on your page:

<a href="http://www.keatonjohnson.com" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image12','','HOME rollover.png',1)"><img src="HOME.png" name="Image12" width="134" height="37" border="0" id="Image12" /></a>

However, going to the location http://www.keatonjohnson.com/HOME.png leads to an error 404 (file not found).

Also, your gallery is being embedded into a <div> named 'flashcontent' and this <div> has been given a height of 100% via CSS so it will take up 100% of its parent container, which in your gallery, happens to be <body> (the entire browser window).
Try putting your title bar in a <div> with height 15% and change the height of the 'flashcontent' <div> to 85%.
Otherwise, you could specify absolute pixel value heights for your <div>s or download and modify the 'View Vertical Resizable Gallery with Header Example' embed example from here: http://simpleviewer.net/simpleviewer/su … e/gallery1

Steven Speirs
SimpleViewer Support Team.

Re: Putting a title bar above simpleviewer gallery

Nevermind, figured it out! Thanks!

Last edited by nlogax (2011-10-02 18:53:44)