I have looked at the Vertical Resize code example, but I am not sure how to edit it or where to put it.
The Vertical Resizable Gallery example may not be ideal for the layout of your page if you wish to keep your header and footer (including the 'art', '925' and 'info' links) as they currently are. With the current size of your header and footer, there will be little room remaining in between for your SimpleViewer gallery, especially on a monitor of limited height such as a laptop screen.
It might be wise to keep your SimpleViewer gallery's height as an absolute pixel value.
Upon updating my galleries, the new thumbnail group gets cut off on the page vertically and the enlarged image does not show except if I use full screen mode.
Currently, all you need to do to see the remainder of your gallery is scroll down your page using the vertical scroll bar in your browser.
I have looked at the Vertical Resize code example, but I am not sure how to edit it or where to put it.
If you would like to try the Vertical Resizable Gallery example, copy the code below into a file named, for example, 'main.html'.
Set the header and footer height in the CSS of the page and swap the header and footer content in the page with your own content. Then just place the file inside a gallery folder and open the file in a browser.
<!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" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" media="screen" href="../css/sv.vertical.template.css" />
<title>SimpleViewer Gallery 1</title>
<style type="text/css">
html, body { height: 100%; overflow: hidden; }
body {
margin: 0;
padding: 0;
background-color: #222;
color: #666;
font-family: sans-serif;
font-size: 20px;
}
a {
color: #ccc;
}
#header {
text-align: center;
background-color: #333;
width: 100%;
height: 20px;
padding: 10px 0;
}
#footer {
text-align: center;
background-color: #333;
color: #fff;
width: 100%;
height: 20px;
padding: 10px 0;
position: relative;
bottom: 0;
left: 0;
}
#flashcontent {
width: 100%;
height: 600px;
}
</style>
<script type="text/javascript" src="svcore/js/simpleviewer.js"></script>
<script type="text/javascript">
function doLayout() {
var winHeight, headerHeight, footerHeight;
winHeight = window.innerHeight ? window.innerHeight : $(window).height();
headerHeight = $('#header').outerHeight();
footerHeight = $('#footer').outerHeight();
var newH = parseInt(winHeight) - parseInt(headerHeight) - parseInt(footerHeight);
$('#flashContent').height(newH);
}
$(document).ready(function () {
doLayout();
$(window).bind('resize', doLayout);
simpleviewer.load('sv-container', '100%', '100%', '222222',true);
});
</script>
</head>
<body>
<div id="header">Header content goes here.</div>
<div id="flashContent">
<div id="sv-container"></div>
</div>
<div id="footer">Footer content goes here.</div>
</body>
</html>
Steven Speirs
SimpleViewer Support Team