Menu
Hi below is code that I found searching the net that places photos in photo album. My problem is when the number of images exceeds the size of the container. so when the user scolls down the list the large image moves up out of sight. I need to have the large image move with the scroll.
any help is create.
[code]
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en”>
<head>
<style type=”text/css”>
a, a:visited, a:hover {color:#000;}
#container {
position:relative;
width:750px; height:600px;
background:#888; border:1px
solid #000; margin:10px auto;
font-family:verdana, arial, sans-serif;
font-size:12px;
overflow:scroll;
}
#container a.pics {
float:right; margin:10px 21px;
display:inline;
color:#000;
text-decoration:none;
border:1px solid #000;
width:100px; height:100px;
cursor:default;
clear:both;
}
#container a.pics img.thumb {
display:block;
border:0;
}
#container a.pics span {
display:none; border:0;
width:580px;
background:#bbb;
border:1px solid #fff;
text-align:center;
}
#container a.pics span img {
margin:10px auto;
border:1px solid #000;
}
#container a.pics:hover {
white-space:normal;
border:1px solid #fff;
}
#container a.pics:hover span {
display:block;
position:absolute;
left:9px;
top:10px;
z-index:10;
height:500px;
}
#container a.pics:active {
border:1px solid #fc0;
}
#container a.pics:active span {
display:block;
position:absolute;
left:9px;
top:10px;
z-index:10;
height:500px;
}
#container a.pics:focus {
border:1px
solid #fc0;
outline:0;
}
#container a.pics:focus span {
display:block;
position:absolute;
left:9px;
top:10px;
z-index:5;
outline:0;
}
#container span.info {
clear:left; display:block;
text-align:center;
line-height:20px;
margin:0;
padding:200px 0 0 0;
width:575px;
text-align:center;
color:#eee;
z-index:1;
}
#container span.info a {
color:#000;
}
#container span.info a:hover {
text-decoration:none;
}
</style>
</head>
<body>
<h2>A Photograph Gallery</h2>
<h3>Updated 18th February 2009</h3>
<div id=”container”>
<a class=”pics” href=”#nogo”><img class=”thumb” src=”gallery/TestFolder-6/thumbs/th_thanksGivinMomBDayCake_121008_0862.JPG” width=”100″ height=”100″ alt=”” />
<span><img src=”gallery/TestFolder-6/thanksGivinMomBDayCake_121008_0862.JPG” width=”450″ height=”450″ alt=”Warm to Cold” title=”Warm to Cold” /><br />Girl & Mom</span>
</a>
<a class=”pics” href=”#nogo”><img class=”thumb” src=”gallery/TestFolder-6/thumbs/th_thanksGivinMomBDayCake_121008_0863.JPG” width=”100″ height=”100″ alt=”” /><span><img src=”gallery/TestFolder-6/thanksGivinMomBDayCake_121008_0863.JPG” width=”450″ height=”450″ alt=”Warm to Cold” title=”Warm to Cold” /><br />
Girl & Mom</span>
<a class=”pics” href=”#nogo”><img class=”thumb” src=”gallery/TestFolder-6/thumbs/th_thanksGivinMomBDayCake_121008_0862.JPG” width=”100″ height=”100″ alt=”” />
<span><img src=”gallery/TestFolder-6/thanksGivinMomBDayCake_121008_0862.JPG” width=”450″ height=”450″ alt=”Warm to Cold” title=”Warm to Cold” /><br />Girl & Mom</span>
</a>
<a class=”pics” href=”#nogo”><img class=”thumb” src=”gallery/TestFolder-6/thumbs/th_thanksGivinMomBDayCake_121008_0863.JPG” width=”100″ height=”100″ alt=”” /><span><img src=”gallery/TestFolder-6/thanksGivinMomBDayCake_121008_0863.JPG” width=”450″ height=”450″ alt=”Warm to Cold” title=”Warm to Cold” /><br />
Girl & Mom</span>
<a class=”pics” href=”#nogo”><img class=”thumb” src=”gallery/TestFolder-6/thumbs/th_thanksGivinMomBDayCake_121008_0862.JPG” width=”100″ height=”100″ alt=”” />
<span><img src=”gallery/TestFolder-6/thanksGivinMomBDayCake_121008_0862.JPG” width=”450″ height=”450″ alt=”Warm to Cold” title=”Warm to Cold” /><br />Girl & Mom</span>
</a>
<a class=”pics” href=”#nogo”><img class=”thumb” src=”gallery/TestFolder-6/thumbs/th_thanksGivinMomBDayCake_121008_0863.JPG” width=”100″ height=”100″ alt=”” /><span><img src=”gallery/TestFolder-6/thanksGivinMomBDayCake_121008_0863.JPG” width=”450″ height=”450″ alt=”Warm to Cold” title=”Warm to Cold” /><br />
Girl & Mom</span>
<a class=”pics” href=”#nogo”><img class=”thumb” src=”gallery/TestFolder-6/thumbs/th_thanksGivinMomBDayCake_121008_0862.JPG” width=”100″ height=”100″ alt=”” />
<span><img src=”gallery/TestFolder-6/thanksGivinMomBDayCake_121008_0862.JPG” width=”450″ height=”450″ alt=”Warm to Cold” title=”Warm to Cold” /><br />Girl & Mom</span>
</a>
<a class=”pics” href=”#nogo”><img class=”thumb” src=”gallery/TestFolder-6/thumbs/th_thanksGivinMomBDayCake_121008_0863.JPG” width=”100″ height=”100″ alt=”” /><span><img src=”gallery/TestFolder-6/thanksGivinMomBDayCake_121008_0863.JPG” width=”450″ height=”450″ alt=”Warm to Cold” title=”Warm to Cold” /><br />
Girl & Mom</span>
</a>
<span class=”info”>Photographs<br />by kind permission of<br /><a href=”http://www.simon-pole.co.uk/”>Simon Pole</a></span>
</div>
</body>
</html>