PDA

View Full Version : lightbox script hides jim's DHTML menu v.5.7



Busy Bee
09-18-2008, 03:48 PM
1) Script Title: title= lightbox and jim's DHTML menu v5.7

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex4/lightbox2/index.htm
and
http://www.dynamicdrive.com/dynamicindex1/jimmenu/index.htm

3) Describe problem: have both the above scripts working on a page, however when the lightbox bigger images are loaded the menu is visible and unfortunately partially hiding the images. does anybody know whether there is a way around this, i.e. I don't want the menu displayed.
thanks in advance for any suggestions.
Busy Bee

jscheuer1
09-18-2008, 04:16 PM
In lightbos.css increase all 3 z-index values by a factor of 1000:


#lightbox{
position: absolute;
left: 0;
width: 100%;
z-index: 10000;
text-align: center;
line-height: 0;
}

#lightbox a img{ border: none; }

#outerImageContainer{
position: relative;
background-color: #fff;
width: 250px;
height: 250px;
margin: 0 auto;
}

#imageContainer{
padding: 10px;
}

#loading{
position: absolute;
top: 40%;
left: 0%;
height: 25%;
width: 100%;
text-align: center;
line-height: 0;
}
#hoverNav{
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 1000;
}
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}

#prevLink, #nextLink{
width: 49%;
height: 100%;
background: transparent url(../images/blank.gif) no-repeat; /* Trick IE into showing hover */
display: block;
}
#prevLink { left: 0; float: left;}
#nextLink { right: 0; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }


#imageDataContainer{
font: 10px Verdana, Helvetica, sans-serif;
background-color: #fff;
margin: 0 auto;
line-height: 1.4em;
}

#imageData{ padding:0 10px; color: #666; }
#imageData #imageDetails{ width: 70%; float: left; text-align: left; }
#imageData #caption{ font-weight: bold; }
#imageData #numberDisplay{ display: block; clear: left; padding-bottom: 1.0em; }
#imageData #bottomNavClose{ width: 66px; float: right; padding-bottom: 0.7em; }

#overlay{
position: absolute;
top: 0;
left: 0;
z-index: 9000;
width: 100%;
height: 500px;
background-color: #000;
}


/* Min-Width */
.lbWidth { /* most browsers */
position: absolute;
top: 0px; left: 0px;
width: 100%;
min-width: 790px;
}

* html .lbContent { /* IE6 */
margin-left: -790px;
position:relative;
}

* html .lbMinWidth { /* IE6 */
padding-left: 790px;
}


/* Clearfix */
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {display: inline-block;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

Busy Bee
09-18-2008, 04:56 PM
thanks a lot, John. you're a star!
Busy Bee

P.S. You wouldn't know whether there is anything I can do regarding a slight positioning problem of the Jim's DHTML menu v5.7? In IE 7 it positions fine, but in firefox as well as in Safari it is slightly out (in FF to the right and in safari to the left....)
have just uploaded the following site, if you want to have a look at the problem.(http://www.fulcrumcompliance.com).
anyway, thanks again.