No replies
rweilert
rweilert's picture
Offline
newbie
Kansas City
Last seen: 10 years 31 weeks ago
Kansas City
Timezone: GMT-5
Joined: 2010-04-20
Posts: 4
Points: 6

I copied the code for this image gallery from here http://monc.se/kitchen/80/lightweight-image-gallery-with-thumbnails
and tried to paste it in my site here http://www.polyform-design.com/stationary.html

And now the height won't adjust to the image gallery.

HTML:

<!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>Polyform Design : Stationary</title>
    <meta name="description" content="I specialize in budget-savvy graphic design for businesses and individuals in the Kansas City area who understand the importance of their visual presence and need design as unique as they are.">
    <meta name="keywords" content="polyform design, graphic design, rhianna weilert, graphc design kansas city, logo, art institute">
    <meta name="copyright" content="Polyform Design 2010">
    <meta name="author" content="Rhianna Weilert">
    <meta name="email" content="[email protected]">
    <meta name="Rating" content="General">
<link href="http://www.polyform-design.com/poly.css" rel="stylesheet" type="text/css" />
 
	<script type="text/javascript">
 
	var activeMenuItem = new Array();
 
	function isUlInArray(inputObj,ulObj){
		while(inputObj && inputObj.id!='dhtmlgoodies_listMenu'){
			if(inputObj==ulObj)return true;
			inputObj = inputObj.parentNode;			
		}		
		return false;
	}
 
	function showHideSub(e,inputObj)
	{
 
 
		if(!inputObj)inputObj=this;
		var parentObj = inputObj.parentNode;
		var ul = parentObj.getElementsByTagName('UL')[0];
		if(activeMenuItem.length>0){
			for(var no=0;no<activeMenuItem.length;no++){
				if(!isUlInArray(ul,activeMenuItem[0]) && !isUlInArray(activeMenuItem[0],ul)){
					activeMenuItem[no].style.display='none';
					activeMenuItem.splice(no,1);
					no--;
				}
			}			
		}
		if(ul.offsetHeight == 0){
			ul.style.display='block';
			activeMenuItem.push(ul);
		}else{
			ul.style.display='none';
		}
	}
 
	function showHidePath(inputObj)
	{
		var startTag = inputObj;
		showHideSub(false,inputObj);
		inputObj = inputObj.parentNode;
		while(inputObj){			
			inputObj = inputObj.parentNode;
			if(inputObj.tagName=='LI')showHideSub(false,inputObj.getElementsByTagName('A')[0]);
			if(inputObj.id=='dhtmlgoodies_listMenu')inputObj=false;	
		}		
	}
 
	function initMenu()
	{
		var obj = document.getElementById('dhtmlgoodies_listMenu');
		var linkCounter=0;
		var aTags = obj.getElementsByTagName('A');
		var activeMenuItem = false;
		var activeMenuLink = false;
		var thisLocationArray = location.href.split(/\//);
		var fileNameThis = thisLocationArray[thisLocationArray.length-1];
		if(fileNameThis.indexOf('?')>0)fileNameThis = fileNameThis.substr(0,fileNameThis.indexOf('?'));
		if(fileNameThis.indexOf('#')>0)fileNameThis = fileNameThis.substr(0,fileNameThis.indexOf('#'));
 
		for(var no=0;no<aTags.length;no++){
			var parent = aTags[no].parentNode;
			var subs = parent.getElementsByTagName('UL');
			if(subs.length>0){
				aTags[no].onclick = showHideSub;	
				linkCounter++;
				aTags[no].id = 'aLink' + linkCounter;
			}	
 
			if(aTags[no].href.indexOf(fileNameThis)>=0 && aTags[no].href.charAt(aTags[no].href.length-1)!='#'){				
				if(aTags[no].parentNode.parentNode){								
					var parentObj = aTags[no].parentNode.parentNode.parentNode;
					var a = parentObj.getElementsByTagName('A')[0];
					if(a.id && !activeMenuLink){
 
						activeMenuLink = aTags[no];
						activeMenuItem = a.id;
					}
				}
			}		
		}		
 
		if(activeMenuLink){
			activeMenuLink.className='activeMenuLink';
		}
		if(activeMenuItem){
			if(document.getElementById(activeMenuItem))showHidePath(document.getElementById(activeMenuItem));	
		}
	}
	window.onload = initMenu;
	</script>
 
  <script type="text/javascript">document.write("<style type='text/css'> #gallery { display: none; } </style>");</script>
 
<script>
var gal = {
init : function() {
if (!document.getElementById || !document.createElement || !document.appendChild) return false;
if (document.getElementById('gallery')) document.getElementById('gallery').id = 'jgal';
var li = document.getElementById('jgal').getElementsByTagName('li');
li[0].className = 'active';
for (i=0; i<li.length; i++) {
li[i].style.backgroundImage = 'url(' + li[i].getElementsByTagName('img')[0].src + ')';
li[i].title = li[i].getElementsByTagName('img')[0].alt;
gal.addEvent(li[i],'click',function() {
var im = document.getElementById('jgal').getElementsByTagName('li');
for (j=0; j<im.length; j++) {
im[j].className = '';
}
this.className = 'active';
});
}
},
addEvent : function(obj, type, fn) {
if (obj.addEventListener) {
obj.addEventListener(type, fn, false);
}
else if (obj.attachEvent) {
obj["e"+type+fn] = fn;
obj[type+fn] = function() { obj["e"+type+fn]( window.event ); }
obj.attachEvent("on"+type, obj[type+fn]);
}
}
}
gal.addEvent(window,'load', function() {
gal.init();
});
</script>
 
<!--[if lt IE 8]>
<style media="screen,projection" type="text/css">
#jgal li { filter: alpha(opacity=50); }
#jgal li.active, #jgal li:hover { filter: alpha(opacity=100); }
</style>
<![endif]-->
 
<!--[if lt IE 6]><style media="screen,projection" type="text/css">#gallery { display: block; }</style><![endif]-->  
 
 
<link href="/poly.css" rel="stylesheet" type="text/css" />
</head>
 
<body class="main">
 
<div id="container">
 
  <div id="home">
  <a href="http://www.polyform-design.com/index.html" target="_self"><img src="http://www.polyform-design.com/images/header.jpg" width="900" height="230" border="0" /></a>
  </div>
 
  <div id="content">
    <div id="images">
    <ul id="gallery">
<li><img src="http://www.polyform-design.com/images/stationary1.jpg" alt="Stationary 1" width="650" height="488"></li>
<li><img src="http://www.polyform-design.com/images/stationary2.jpg" alt="Statioary 2" width="650" height="563"></li>
<li><img src="http://www.polyform-design.com/images/stationary4.jpg" alt="Stationary 4" width="650" height="522"></li>
<li><img src="http://www.polyform-design.com/images/stationary3.jpg" alt="Stationary 3" width="650" height="546"></li>
</ul>
    </div>
      <div id="description">Content for  id "description" Goes Here</div>
  </div>
<div id="menu">
  	<ul id="dhtmlgoodies_listMenu">
    <br />
	<li><a href="#">: IDENTITY</a>
				<ul>
					<li><a href="http://www.polyform-design.com/logo.html">Logo</a></li>
					<li><a href="http://www.polyform-design.com/stationary.html">Stationary</a></li>
		</ul>		
	  </li>   
          <br />
		<li><a href="#">: PRINT</a>
				<ul>
					<li><a href="http://www.polyform-design.com/brochure.html">Brochure</a></li>
					<li><a href="http://www.polyform-design.com/magazine.html">Magazine</a></li>
					<li><a href="http://www.polyform-design.com/musicpackaging.html">Music Packaging</a></li>
					<li><a href="http://www.polyform-design.com/selfmailer.html">Self-Mailer</a></li>
 
				</ul>		
	  </li>   
          <br />
		<li><a href="#">: ILLUSTRATION</a>
				<ul>
					<li><a href="http://www.polyform-design.com/advertising.html">Advertising</a></li>
					<li><a href="http://www.polyform-design.com/book.html">Book</a></li>
				</ul>
	  </li>
          <br />
		<li><a href="#">: DIGITAL</a>
				<ul>
					<li><a href="http://www.polyform-design.com/interface.html">Interface</a></li>
					<li><a href="http://www.polyform-design.com/web.html">Web</a></li>
				</ul>			
	  </li>   
          <br />       
			<li><a href="#">: ENVIRONMENT</a>
				<ul>
					<li><a href="http://www.polyform-design.com/museum.html">Museum</a></li>
					<li><a href="http://www.polyform-design.com/signge.html">Signage</a></li>
				</ul>
			</li>
	</ul>
  </div>
 
  <div id="contact">
    <a href="http://www.linkedin.com/in/rhiannaweilert" target="_blank"><img src="http://www.polyform-design.com/images/name.jpg" alt="Rhianna Weilert - LinkedIn" width="192" height="48" border="0" /></a><a href="mailto:[email protected]"><img src="http://www.polyform-design.com/images/email.jpg" alt="Email Address" width="287" height="48" border="0" /></a><img src="http://www.polyform-design.com/images/phone.jpg" alt="Phone Number" width="184" height="48" /><a href="http://www.polyform-design.com/information.html" target="_parent"><img src="http://www.polyform-design.com/images/information.jpg" alt="Information" width="237" height="48" border="0" /></a>
  </div>
 
</div>
 
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-6928500-1");
pageTracker._trackPageview();
} catch(err) {}</script>
 
</body>
</html>

CSS:

@charset "UTF-8";
 
a {
  outline: none;
}
 
body {
	background-color: #333;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 0.7em;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	color: #333;
	margin: 0px;
	border-top-width: 0px;
	border-right-width: 0px;
	border-bottom-width: 0px;
	border-left-width: 0px;
	text-decoration: none;
	}
 
.main #container {
	width: 900px;
	background: #FFFFFF;
	border: none;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}
.main #container #content {
	float: left;
	width: 650px;
	padding: 0px;
	height: auto;
}
.main #container #content #welcome p {
	font-style: italic;
	font-size: 1.5em;
	padding: 0px;
	margin-top: 10px;
}
.main #container #content #images {
	margin: 0px;
	padding: 0px;
	float: left;
	width: 650px;
	height: inherit;
	position: relative;
	z-index: 2;
}
 
#jgal {
	list-style: none;
	width: 650px;
	height: auto;
}
#jgal li {
	opacity: .5;
	float: left;
	display: block;
	width: 60px;
	height: 60px;
	background-position: 50% 50%;
	cursor: pointer;
	border: 3px solid #fff;
	outline: 1px solid #ddd;
	margin-right: 14px;
	margin-bottom: 14px;
}
#jgal li img {
	margin-top: 70px;
	display: none;
	width: 650px;
	position: absolute;
	left: 35px;
}
#jgal li.active img {
	display: block;
}
#jgal li.active, #jgal li:hover { outline-color: #bbb; opacity: .99 /* safari bug */ }
 
/* styling without javascript */
#gallery { list-style: none; display: block; }
#gallery li { float: left; margin: 0 10px 10px 0; }
 
.main #container #content #images #description {
	font-family: Verdana, Geneva, sans-serif;
	font-size: 1em;
	font-style: normal;
	line-height: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	color: #333;
	text-decoration: none;
	margin: 0px;
	padding: 0px;
	width: 650px;
	position: absolute;
	left: 35px;
}
 
.main #container #menu {
	margin-left: 685px;
	padding-right: 65px;
	text-align: right;
	width: 150px;
	font-family: Verdana, Geneva, sans-serif;
	font-size: 1em;
	text-decoration: none;
	line-height: normal;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	color: #333;
}
 
	.main #container #menu #dhtmlgoodies_listMenu a{	/* Main menu items */
		color:#000;
		text-decoration:none;
		font-weight:normal;
	}
	.main #container #menu #dhtmlgoodies_listMenu ul li a{	/* Sub menu */
		color: #999;
		font-weight:normal;
	}
 
	.main #container #menu #dhtmlgoodies_listMenu .activeMenuLink{	/* Styling of active menu item */
		color:#999;
	}
 
 
	/*
	No bullets
	*/	
	.main #container #menu #dhtmlgoodies_listMenu li{
		list-style-type:none;	
	}
 
	/*
	No margin and padding
	*/
	.main #container #menu #dhtmlgoodies_listMenu, #dhtmlgoodies_listMenu ul{
		margin:0px;
		padding:0px;
	}
 
	/* Margin of sub menu items */
	.main #container #menu #dhtmlgoodies_listMenu ul{
		display:none;
	}
 
.main #container #contact {
	clear: both;
}