Image Thumbnail Viewer

[perkiekat]

1) Script Title: Image Thumbnail Viewer

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/thumbnail.htm

3) Describe problem: The first large image hides behind the header area, but if you scroll down the page a wee bit and click on the same small image, the large image appears correctly. What do I need to do in order for the large image to appear in front of the header area without having to scroll down a bit?

[ddadmin]

By hiding under the header area, do you mean on the DD demo page, whereby the header overlaps and covers partially the enlarged image? If so this probably occurred when the header area was showing a Flash or rich media advertisement. Some browsers such as IE incorrectly handles two elements overlapping one another, and will always show the Flash object on top. If this is the issue you're talking about, it should only occur on your own pages under similar circumstances.

[perkiekat]

On the demo page it is showing correctly. Where i have it installed and when you click on the first image without scrolling down, it goes under the header and does not show all of the image. If you scroll down just a wee bit, it shows up correctly.

Just so you know, i tried removing the background color of the header and the large image of the Image Viewer goes behind all of the navigation tabs making the nav tabs on top of the image. Not the desired look for sure.

Would there be a way I can force the large image to show in front of the header?

Thanks

[perkiekat]

Has anyone else had this issue? I am sure it has to do with my style sheet, therefore, I guess I 'll ask in the CSS area. It's not the script, it works.

Thanks anyway.

[ddadmin]

Worth a shot, but inside thumbnailviewer.css, try changing the z-index value to a higher number, such as 1000:

#thumbBox{ /*Outermost DIV for thumbnail viewer*/
position: absolute;
left: 0;
top: 0;
width: auto;
padding: 10px;
padding-bottom: 0;
background: #313131;
visibility: hidden;
z-index: 1000;
cursor: hand;
cursor: pointer;
}

[perkiekat]

Worth a shot, but inside thumbnailviewer.css, try changing the z-index value to a higher number, such as 1000:

#thumbBox{ /*Outermost DIV for thumbnail viewer*/
position: absolute;
left: 0;
top: 0;
width: auto;
padding: 10px;
padding-bottom: 0;
background: #313131;
visibility: hidden;
z-index: 1000;
cursor: hand;
cursor: pointer;
}

I changed it to 1000 -- still nothing, then I added a 0, making it 10000 ---HELLO!!! It is showing up correctly!! Thank you so very much for helping me with this. I deeply appreciate it!