i read all the comments on prev and next button not showing up but none of them solved my problem.
My real problem is that I don't see the next.gif and prev.gif button show up. My mouse turns into a hand when I go 50% or more to the right. I'm also able to click on it and itll take me to the next picture. The same thing happens with my prev.gif. But I DONT SEE THE IMAGES. I tried going into .css file and re-routing the "prevlabel.gif" and "nextlabel.gif" to correctly point to the right folder, but nothing changed.
I'm able to switch between pics by clicking the image(when my mouse changes from an arrow to a hand) but I can't see the images for "prev" and "next"
Can anyone help me PLEASE!.
Here is my code from lightbox.css.
hope this helps
#lightbox{
position: absolute;
left: 0;
width: 100%;
z-index: 100;
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: 10;
}
#imageContainer>#hoverNav{ left: 0;}
#hoverNav a{ outline: none;}
#prevLink, #nextLink{
width: 49%;
height: 100%;
background: transparent url(..lightbox 2/images/blank.gif) no-repeat; /* Trick IE into showing hover */
display: block;
}
#prevLink { left: 0px; float: left;}
#nextLink { right: 0px; float: right;}
#prevLink:hover, #prevLink:visited:hover { background: url(..lightbox 2/images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(..lightbox 2/images/nextlabel.gif) right 15% no-repeat; }
#imageDataContainer{
font: 10px Verdana, Helvetica, sans-serif;
background-color: #fff;
margin: 0 auto;
line-height: 1.4em;
overflow: auto;
width: 100%
}
#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: 90;
width: 100%;
height: 500px;
background-color: #000;
}
http://www.dynamicdrive.com/dynamici...box2/index.htm



Reply With Quote

Bookmarks