Lightbox 2 showing next/prev buttons

[bikeman]

1) Script Title: Lightbox2

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...box2/index.htm

3) Describe problem: I would like to have the prev/next bottons showing by default rather than fading in on mouse over. Have looked throught lightbox.js and css files but cant get it working. Can anyone advise how to achieve this, thanks.

[jscheuer1]

In lightbox.css, change:

#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; }

to:

#prevLink { left: 0; float: left;background: url(../images/prevlabel.gif) left 15% no-repeat;}
#nextLink { right: 0; float: right;background: url(../images/nextlabel.gif) right 15% no-repeat;}
#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; }

[bikeman]

Thanks, worked a treat.

[gamefrog]

Is there a way to include the 'prev' and 'next' - button to the bottom navigation?

would be nice to have these buttons next to the 'close' image (left side)

edit://
found a solution:
changed:

#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; }

to:

#prevLink { left: 0; float: left;background: url(../images/prevlabel.gif) left 0% no-repeat;}
#nextLink { right: 0; float: right;background: url(../images/nextlabel.gif) right 0% no-repeat;}
#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 0% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 0% no-repeat; }

15% => 0%
an changed also thr prevlabel.gif and nextlabel.gif to smal arrows

[hdawg12]

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 "prevlable.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;
}

[daemonkin]

Where are your images located in regard to where the script is called from?

I keep all my general images in my images directory. I then remove the '../' tag from the css and javascript files and replace with '/images/' so that it will always be called from the same place.

Are you able to see the other images - close, loading etc?

D.

[vicpoke]

if you use the code you wrote, the next and prev buttons will only appear if you put the page on a web server. If you are trying the page in your local computer, you have to change this:
#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; }

you have to remove the path part "../" because it will not work in local host. So try with
#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; }




It worked for me!

[jscheuer1]

if you use the code you wrote, the next and prev buttons will only appear if you put the page on a web server. If you are trying the page in your local computer, you have to change this:
#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; }

you have to remove the path part "../" because it will not work in local host. So try with
#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; }

It worked for me!

That's only because that's where the images were. Other than that, what you are saying is completely wrong. The ../ convention is as valid on the localhost as it is on the web. It simply means to go to the parent folder of the current folder and then read the rest of the path from there. As I say - if that's where the file/image/whatever is, it will work locally as well as on the web.

Some confusion about paths is always possible though as there are several forms a path can take, and in the case of a relative path (both types of paths used in your post are relative paths), it also depends upon where the file that has the path read from it is located as to where that path actually points.

[juaninacio]

hello there, I have changed my css as you described above and that worked fine. NOw I can see the next / previous buttons all the time. My problem now is that when I reach either the last or first image, it keeps showing the prev / next arrows.

If for example I am in the first picture and I click the prev button, it would just show a blank picture with the loading sign permanently. Is there any way to fix that?

Thanks

[jscheuer1]

hello there, I have changed my css as you described above and that worked fine. NOw I can see the next / previous buttons all the time. My problem now is that when I reach either the last or first image, it keeps showing the prev / next arrows.

If for example I am in the first picture and I click the prev button, it would just show a blank picture with the loading sign permanently. Is there any way to fix that?

Thanks

In that case, you either did something else to the css or (more likely) had edited the lightbox.js file, or you are using a different version of lightbox, or you didn't follow the instructions somewhere along the line. In any case, if you start with the default installation of the script - and let's be clear on which one, there are several versions of lightbox - this will not happen. There will be no next button at the end, and no previous button at the beginning. The only possible exception I can think of is some quirk of some browser, even that should not happen though if all the instructions have been followed. Here is the script we are talking about in this thread:

http://www.dynamicdrive.com/dynamici...box2/index.htm

If you are using a different version, or have made other alterations, please start a new thread for a new question.