[James Bond C++ Spy]

I am working on a photography website for a friend and I need some help. I have built a page with thumbnails on the left of the page and as you hover over them the picture displays on the right side full size. It is works great but there are too many pictures. I need to make the thumbs on the left side scroll (so I can fit all of them) and display on the right side full size. I have done this via HTML and CSS.

Here is my CSS code:

/*CSS Gallery Code*/

.gallerycontainer{
position: relative;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}
.thumbnail img{
border: 1px solid white;
margin: 0 5px 5px 0;
}
.thumbnail:hover{
background-color: transparent;
}
.thumbnail:hover img{
border: 1px solid gold;
}
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 15px;
left: 450px; /*position where enlarged image should offset horizontally */
z-index: 50;
}
</style>

Here is my HTML code:

<div class="gallerycontainer">
<!-- Gallery Row Horz -->
<a class="thumbnail" href="#thumb"><img src="Images/The Joy of Children/Child21.jpg" width="75px" height="50px" border="0" /><span><img src="Images/The Joy of Children/Child21.jpg" /><br /></span></a>
<a class="thumbnail" href="#thumb"><img src="Images/The Joy of Children/Child19.jpg" width="75px" height="50px" border="0" /><span><img src="Images/The Joy of Children/Child19.jpg" /><br /></span></a>
<a class="thumbnail" href="#thumb"><img src="Images/The Joy of Children/Child18.jpg" width="75px" height="50px" border="0" /><span><img src="Images/The Joy of Children/Child18.jpg" /><br /></span></a> 
<a class="thumbnail" href="#thumb"><img src="Images/The Joy of Children/Child15.jpg" width="75px" height="50px" border="0" /><span><img src="Images/The Joy of Children/Child15.jpg" /><br /></span></a>
<a class="thumbnail" href="#thumb"><img src="Images/The Joy of Children/Child25.jpg" width="75px" height="50px" border="0" /><span><img src="Images/The Joy of Children/Child25.jpg" /><br /></span></a>
<br />
<!-- Gallery Row Horz-->
<a class="thumbnail" href="#thumb"><img src="Images/The Joy of Children/Child2.jpg" width="75px" height="50px" border="0" /><span><img src="Images/The Joy of Children/Child2.jpg" /><br /></span></a>
<a class="thumbnail" href="#thumb"><img src="Images/The Joy of Children/Child4.jpg" width="75px" height="50px" border="0" /><span><img src="Images/The Joy of Children/Child4.jpg" /><br /></span></a>
<a class="thumbnail" href="#thumb"><img src="Images/The Joy of Children/Child8.jpg" width="75px" height="50px" border="0" /><span><img src="Images/The Joy of Children/Child8.jpg" /><br /></span></a>
<a class="thumbnail" href="#thumb"><img src="Images/The Joy of Children/Child11.jpg" width="75px" height="50px" border="0" /><span><img src="Images/The Joy of Children/Child11.jpg" /><br /></span></a>
<a class="thumbnail" href="#thumb"><img src="Images/The Joy of Children/Child12.jpg" width="75px" height="50px" border="0" /><span><img src="Images/The Joy of Children/Child12.jpg" /><br /></span></a>
</div>

This code works perfect but I need to be able to scroll (not the whole page just the thumbs)(with a scroll box??) the list of thumbnails on the left and have the images show full size on the right as there hovered over. Thanks for any help with this.

[b.ihde]

Hi!

Try this:

.gallerycontainer{
position: relative;
overflow: auto;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}

You have to set the height of the div box. overflow: auto means,if the div box is larger than the content, there is no scroll bar, if not, there is one You can try also overflow: scroll, if the scroll bar should always be visible.

regards

B.Ihde

[James Bond C++ Spy]

Thanks that got the part of the page to scroll. The problem is the full size image stays at the top so if you scroll down the full image doesn't scroll so you loose part of it. Check out the page:

http://www.shanebowe...alleryTest.html]Children Gallery[/url]

Any ideas???
Thanks for your help

[fashionnugget]

You could always make 2 pages of children photos, just copy the code and change the images.

[James Bond C++ Spy]

How can I just make the thumbs scroll on the left side of the screen and get the full display image to stay in the same spot on the screen to the right? One of the pages I need to do has 130 or so images. Can I do this with frames? Can someone please help. Thanks for any help

[b.ihde]

If you want to have it easier, you can use javascript for creating a image galary like this...

[~NJ]

Since your setup is displaying both the thumbnails and the main images inside a single div, it's not possible to have the scrollbar only effect the thumbnails when it is the main div that is holding that attribute.

What you can do is assign a fixed position to the spans or the imgs.
Replace:

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

With:

.thumbnail span{ /*CSS for enlarged image*/
position: fixed;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

Overall, I highly recommended a different structure for an album as one like this is kind of sloppy. I would like to recommend you look into a Javascript library such as jQuery for performing something like this with easy and I'd like to further recommend you do some quick Google searches for some premade image galleries and possibly learning the structure that they have used.