View Full Version : Lightbox 2.03a: Viewing Multiple Images

05-05-2008, 06:55 PM
1) Script Title: Lightbox 2.03a

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

3) Describe problem: I have been working on a site where I use the lightbox 2.03a script. It works successfully on a numbr of pages, but will only let me view 2 grouped images.

I have posted a page I am working on which, at this point, includes 3 images. The URL is: http://www.dirksencenter.org/1945trip/june4study.htm.

When you click on the first image in the left-hand column, the correct image pulls up and notice at the bottom it reads "Image 1 of 3."

When you click the image to proceed to the second image, it pulls up the correct image and at the bottom it reads "Image 2 of 3."

However, when click the image to proceed to the third image, it pulls up the first image instead of the third image, which is incorrect.

I have checked and double-checked and cannot find what I am doing wrong. This page will actually have 6 images attached to each other. I just posted three to present the problem for some advice.

I look forward to any help I can receive.


05-06-2008, 05:22 AM
You have an error in your lightbox css file, and it appears as though the next and previous images are missing. Start over with a fresh copy of lightbox.css from the distribution archive, and make sure that the next and previous images are available to your page.

Now, it looks as though you are trying to make lightbox only do next, and to do it without the next and previous buttons. In that case, you might try this change to your existing lightbox css file (addition red):

#prevLink {width:1px; left: 0; float: left;}

width:0; might be even better, but might not work in some browsers.

But that will make the next button visible, at least it did in FF. So, if you do want to get rid of the button, you can remove it from the css as well (delete both these lines):

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

as you obviously don't need the previous button either.