Image gallery with one thumbnail - Lightbox

[Cubikated]

1) Script Title: Lightbox image viewer 2.03a

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

3) Describe problem: Hi, I'm new to web design and Lightbox. Love the Lightbox features. Just wondering if there is any possibility to create an image gallery/group of images with only one thumbnail? Clicking the thumbnail takes you to an enlarged image gallery/group of images and then with the next thumbnail another gallery/group, and another, and another....
Basically what I want is to display one Product with a thumbnail and by clicking takes you to a gallery/group of multiple images of the same product....same with another thumbnail, and another....this way I could display all my products with thumbnails and give a better description of the product with a gallery/group of images.
Oh! and can i use a mouseover effect on the thumbnail?
Am I asking too much? Sorry if I haven't got the terminology wrong!!!:confused:


Thanks and have a good weekend.

p.s. I'm sure this question has been already asked a million times :)

[jscheuer1]

p.s. I'm sure this question has been already asked a million times

Yes it has, well maybe not a million. And the answer is yes. For one group of three keyed off of one thumbnail, do like:


<a href="product_1/image-1.jpg" rel="lightbox[product_1]"><img src="product_1_thumb.jpg" alt=""></a>
<a href="product_1/image-2.jpg" rel="lightbox[product_1]"></a>
<a href="product_1/image-3.jpg" rel="lightbox[product_1]"></a>

Notice that only the first link in the group has anything that gets displayed (product_1_thumb.jpg). The other two links are 'empty' (<a></a>), so will not be seen. To add more images to this group, just add more empty links, ex:


<a href="product_1/image-4.jpg" rel="lightbox[product_1]"></a>

The paths and image names are unimportant, set them to reflect the actual organization of your files and folders. The group name is also up to you. Just use one group name for each group. It's best to pick one that represents the group. That makes it easier to read and understand the code later. You can do this as many times on a page as you like. The next group could be like:


<a href="product_2/image-1.jpg" rel="lightbox[product_2]"><img src="product_2_thumb.jpg" alt=""></a>
<a href="product_2/image-2.jpg" rel="lightbox[product_2]"></a>
<a href="product_2/image-3.jpg" rel="lightbox[product_2]"></a>

If you want captions, add a title attribute to the a tags.

[Cubikated]

Oh fantastic John!!!!! Thanks for that mate.....will try it out now!!! You are a life saver!!!! :)

[bialyhoo22]

Hey guys,

Stumbled my way onto this thread and have found it extremely helpful. Many thanks!

I was wondering if its possible to apply this same one thumbnail principle to an image map?

For instance, heres a typical image mapped button: <area shape="rect" coords="152,93,322,203" href="images/image1.jpg" rel="lightbox" alt="">

What coding would come next to allow me to have the rest of my images appear in the lightbox gallery?

Any help would be MOST appreciated : )

[jscheuer1]

I'd try:


<area shape="rect" coords="152,93,322,203" href="images/image1.jpg" rel="lightbox[groupname]" alt="">
<area shape="rect" coords="0,0,0,0" href="images/image2.jpg" rel="lightbox[groupname]" alt="">
<area shape="rect" coords="0,0,0,0" href="images/image3.jpg" rel="lightbox[groupname]" alt="">

[jason_21218]

john,

Can you post or message me links to examples of multiple slideshows/galleries accessible on same page via thumbnails?

[vitof123]

I used this method in my site but no of image display more than actual.

egtoursdotcom/test.php



john,

Can you post or message me links to examples of multiple slideshows/galleries accessible on same page via thumbnails?

[jscheuer1]

See:

http://www.dynamicdrive.com/forums/showthread.php?55276-Image-gallery-with-one-thumbnail-Lightbox&p=228919#post228919