Javascript “Lightbox” Image Gallery with Vertical Scrolling Thumbs

Question

I am working on a web project that will have multiple galleries/albums accessible on one page.

I want, when the user clicks a gallery link, a "lightbox"-type gallery appears in the middle of the page. I would like the image (with a caption below it) on the left, and a scrollable, vertical display of thumbnails.

My idea is similar to the "thumbs vertical" version of: http://codecanyon.net/item/advanced-slider-jquery-xml-slider/full_screen_preview/132618

I would use that gallery slider, but the gallery itself does not appear like a "lightbox" and there is no caption below each image.

Question: Does anyone know of a gallery that already operates this way? Or one that is easily modified? Or could provide a guide to make one from scratch?

Summarized Requirements:

• Multiple galleries/albums available on one page
• Gallery shows up in "lightbox" when respective link is clicked
• On the left, the image with a caption below it
• On the right, a vertical, scrollable, thumbnail interface

This task has many steps, and would appreciate any help. Thanks.

Answer 1

I have done similar things using FancyBox http://fancybox.net/ Fancy box allows you to open another page via iFrame (among other things) within the pop up area.

$.fancybox({
'content': 'iframepage.php?imgid=3',
'type': 'iframe',
'width': 800,
'height': 500
});

Then on your iframepage.php lay it out exactly how you want it, anything that overflows on that page you can use the scroll bar to see more.