View Full Version : CSS Image Gallery

10-08-2006, 04:51 PM
1) Script Title: CSS Image Gallery

2) Script URL (on DD): http://www.dynamicdrive.com/style/csslibrary/item/css-image-gallery/

3) Describe problem: I have modified this script to display the thumbnails floating vertically on the right side of the div container. I also modified the span style as follows:

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

I did this so that the right edge of the enlarged photos would align within the left edge of the thumbnails so that a visitor could place their cursor over the enlarged photo (without it disappearing) and scroll down if the photo was longer than the the display area. Without this alignment (touching enlarged span to thumbnail position) , the enlarged photo disappears if you need to scroll down the page.

My problem is that without the left postion (commented out) the text within the span tag which displays at the bottom of the enlarged photo, breaks each word instead of displaying normally across the bottom of the span area. If I put in a left value, I get the text to display correctly, but then the enlarged photo is no longer touching the thumbnail. Is there some solution to this as problem?

You can see the script on this page ( http://www.thenational.us/ ), but I am just beginning to develop this hobby site, so all links are dead or still pointing back to dynamic drive where I downloaded the scripts.

Also, I am not able to see the span text for the bottom thumb when I view the expanded photo. I seem to only be able to view to the bottom of the photo and not the text below the photo, how would i get viewing access to that text?

Thank you,


10-12-2006, 05:09 PM
No one offered a solution to the left right problem, so I did two things on my own. One was very time consuming but educational, I wrote a couple of Javascript functions that preloaded the images and allowed me to access the width and height properties of each image. I then used document.write to input the width values to the span tags and onMouseOver to change the height image value of the DIV container tag when there was an overflow problem.

Later, I decided to remove the javascript functions and just use the Cool DHTML Tooltip to tag text to the images, since I was using the tooltip functions anyway.

Sometimes, you don't always get what you want but you get what you need, (thanks Mick).

John V