PDA

View Full Version : Javascript menu showing through Lightbox...



smoo1604
01-29-2009, 04:05 PM
I have used a javascript horizontal menu along the top of page, and have the lightbox script running for viewing pictures in a gallery. Only problem is when the picture is clicked on and opens via the lightbox script, i can still see the javascript menu through the picture... any ideas how to override javascript menu when lightbox image is enlarged?

thanks!

Shona
p.s. i am VERY new to javascript menus!!

jscheuer1
01-29-2009, 04:12 PM
In most cases, increasing all z-index values in the lightbox.css file by a factor of 100 will take care of this.

If you want more help:

Please post a link to the page on your site that contains the problematic code so we can check it out.

smoo1604
01-29-2009, 04:16 PM
ah yes would make sense!!

to resolve problem at the moment i have removed the menu script for the gallery pages and put a simple link back to main page at bottom of pictures.

have put a dummy page up though so problem can be seen! its

http://www.frasersauctionroom.co.uk/javamenu.htm

thanks!

Shona

jscheuer1
01-29-2009, 04:48 PM
That's an older version of Lightbox (still listed in the library here, as it is the original version and simpler in some ways) with no z-index styles in the stylesheet. Use this as your lightbox.css file:


#lightbox{
background-color:#eee;
padding: 10px;
border-bottom: 2px solid #666;
border-right: 2px solid #666;
z-index: 10000!important;
}
#lightboxDetails{
font-size: 0.8em;
padding-top: 0.4em;
z-index: 10000!important;
}
#lightboxCaption{ float: left; z-index: 10000!important;
}
#keyboardMsg{ float: right; }
#closeButton{ top: 5px; right: 5px; }

#lightbox img{ border: none; clear: both;}
#overlay img{ border: none; }

#overlay{ background-image: url(overlay.png); z-index: 9000!important;
}

* html #overlay{
background-color: #333;
back\ground-color: transparent;
background-image: url(blank.gif);
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="overlay.png", sizingMethod="scale");
}


And since these are both Dynamic Drive scripts, you should have posted in the Dynamic Drive Scripts Help section. But don't worry about that now, next time though . . .