Lightbox, HELP!!

[Argrew]

Hello everyone. I am using lightbox for a few of my websites but have not ever needed the previous and next buttons until now. I can't seem to get them to work but have no idea why. They just do not show up on my lightbox images. I have made my own transparent images for these buttons and they are in the correct file but They do no show up when the window opens. Here is the link and my script. Please help.

http://www.argrew.com/works.html

here is an example of the code linked thumbnails which open in lightbox


<tr>
<td><a href="gallery/machina.jpg" rel="lightbox">
<img src="gallery/machina-t.jpg" border="2"></a></td>
<td><a href="gallery/big.jpg" rel="lightbox">
<img src="gallery/big-t.jpg" border="2"></a></td>
<td><a href="gallery/birdsofflesh.jpg"rel="lightbox">
<img src="gallery/birdsofflesh-t.jpg" border="2"></a></td>
<td><a href="gallery/burntheory1.jpg"rel="lightbox">
<img src="gallery/burntheory1-t.jpg" border="2"></a></td>
</tr>


and here is my lightbox css code.



#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(../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: 90;
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 */

any ideas why this is not working?

[fezor]

Hi Argrew,

The fix is pretty simple. All you need to do is insert a group name for the different sets of images. For example, where you have


<a href="gallery/machina.jpg" rel="lightbox">....</a>

In the rel attribute, make it "lightbox[groupname]". You can put whatever name you want and lightbox takes care of the rest. Just make sure that all the images you want to be in that set have the same group name. Good luck!