Lightbox : "next" & "previous" arrows don't appear on my pictures

MFNO

Joined: 2007-12-13
Posts: 63
Posted: Fri, 2010-10-29 23:13

Hello,

I am using ebony theme, which I changed a little here and there. It's a work in progress at the moment. You can see a gallery here, for instance : http://www.laurent-photo.com/main.php?g2_itemId=402

When you click on a picture, it opens using lightbox, but the only way to go to the next or previous picture is to click on the little arrows at the bottom of the image, or to use the direction keys on the keyboard.

I've often seen galleries using lightbox having a cool small arrow appearing on the picture itself, when you roll over the image with the mouse, towards the right of the image ("next") or the left ("previous"). Then with one click on those appearing arrows, one could go to the next image immediately.
See example in the "image set" gallery here : http://www.lokeshdhakar.com/projects/lightbox2/#example

I don't have this feature through ebony and the lightbox files used there.

I think this might be possible, cause there are 2 arrows pictures called next.gif and prev.gif in the image folder of the theme, which are not used (the smaller arrows below have a different name).

Please know that I am super lame at programming, and I don't know anything about CSS and that kind of thing. In case you need it, the lightbox.css file is like this :

Quote:
#lbOverlay {
position: absolute;
left: 0;
width: 100%;
background-color: #000;
cursor: pointer;
}
#lbCenter, #lbBottomContainer {
position: absolute;
left: 50%;
overflow: hidden;
background-color: #3d3d3d;
}
.lbLoading {
background: #fff url(../images/spinner2.gif) no-repeat center;
}
#lbImage {
border: 10px solid #3d3d3d;
}
.photos {
padding: 3px;
border: 1px solid #3d3d3d;
}

a:hover .photos {
border: 1px solid #999;
}

.lightboxDesc a {
color: #999;
text-decoration: none;
}

.lightboxDesc a:hover {
color: #ccc;
text-decoration: none;
}

#lbPrevLink, #lbNextLink {
display: block;
width: 41px;
height: 12px;
outline: none;
}

#lbPrevLink {
float: left;
background: transparent url(../images/prevlabel.gif) no-repeat left;

}

#lbPrevLink:hover {
background: transparent url(../images/prevlabel.gif) no-repeat left;
}

#lbNextLink {
float: right;
background: transparent url(../images/nextlabel.gif) no-repeat right;
}

#lbNextLink:hover {
background: transparent url(../images/nextlabel.gif) no-repeat right;
}

#lbControls {
display: block;
height: 32px;
}
#lbBottom {
font-family: Arial, Verdana, Helvetica, sans-serif;
font-size: 12px;
color: #999;
line-height: 150%;
text-align: left;
border: 10px solid #3d3d3d;
border-top-style: none;
}

#lbCloseLink {
clear: both;
display: block;
float: right;
width: 66px;
height: 22px;
background: transparent url(../images/closelabel.gif) no-repeat center;
margin: 0px 0px 0px 0px;
}
#lbCaption, #lbNumber, #lbDescription {
margin-right: 71px;
}
#lbCaption {
font-weight: bold;
}
#lbCaption a:link {
color: #999;
}
#lbCaption a:hover {
color: #ccc;
}
#lbCaption a:visited {
color: #999;
}

.lightboxDesc {
display: none;
}

Thank you for your help.

In case that's not possible, I could see a smaller improvement if, when you click on the actual picture, it goes to the next picture. Right now nothing happens if you click on it.