Why won't my lightbox gallery show the third image?

November 17, 2010 9:37 AM

Why won't my lightbox gallery show the third image?

Hey,
I'm stuck trying to create a gallery that is launched by clicking on a single thumbnail and then scrolls through to two additional images.
For some reason it will only go between the first two images. And to make it extra odd if you click close while viewing the second image in the gallery it will take you to the third image in the next set!
These galleries are launched by clicking on a thumbnail of only the first image while the next two are hidden links on the page.
It's not working!
Anyone have some advice?
You can see the page here (the thumbnails that should launch a three image gallery are the last two in the left column and the last in the right):
http://www.carlyh.com/print.html

thanks!

posted by matt_od to Computers & Internet (8 answers total)

Your "next" button is there after the 2nd image, it's just getting shoved below the lightbox...scroll down and roll your mouse outside the lightbox and you should see it.
posted by circular at 9:48 AM on November 17, 2010

(rather, roll your mouse around the caption area after you scroll down)...anyway, seems like a positioning problem that some adjusted CSS could fix.
posted by circular at 9:51 AM on November 17, 2010

Response by poster: oh wow. hadn't noticed that!
thanks circular.
I'll take a look at the css.
I'm still pretty novice at this stuff, so if anyone else cares to jump in that'd be cool.
Not sure why the positioning for the next would move from one image to the next since I believe the script is applying to same css for each image... but yea... hah. confusing.
posted by matt_od at 9:58 AM on November 17, 2010

I haven't tested this with your code, but my suspicion is that since you are using the ID "hide" multiple times, there is some funkiness going on especially when combined with JS. IDs are to be used once per document. Change it to a class, and see what happens. (and it'll be standards compliant that way too)
posted by fontophilic at 10:46 AM on November 17, 2010

Response by poster: fontophilic, I sure do like being compliant, so thanks for that info. Unfortunately it didn't fix the issue. I'm starting to wonder if it's an issue in the javascript. It's very bizarre, but when the second image comes up it is actually forcing the page to have greater vertical height.
posted by matt_od at 11:16 AM on November 17, 2010

Response by poster: well, we ended up going a different route for displaying that information, so this is no longer an issue. thanks for everyone who gave input.
posted by matt_od at 2:53 PM on November 17, 2010

The lightbox library you chose is from 2008. As such it may tend to be flaky. One thing is you have some inconsistencies regarding the sizing of the linked-to images. Another is the duplicated id attributes, but that's not a problem.

To me, it's unclear from your question whether you want to have all 21 images in the slideshow, or whether each image represents the associated images and you're not meant to be able to get to the other sets from a different set.

I cleaned up your html a little bit, in two versions, regardless, unfortunately before I saw your follow-up.

I think the JavaScript is fine, the problem is the library you chose requires you to configure by editing source files, rather than being more configurable, like, say FancyBox, which is what I like for this task.

Best of luck.
posted by artlung at 4:27 PM on November 17, 2010

Response by poster: ah, this is a bit late on my part, but thanks artlung!
posted by matt_od at 12:30 AM on December 6, 2010