PDA

View Full Version : Image gallery with one thumbnail - Lightbox



Cubikated
06-12-2010, 08:07 PM
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
06-13-2010, 03:34 AM
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
06-13-2010, 05:51 PM
Oh fantastic John!!!!! Thanks for that mate.....will try it out now!!! You are a life saver!!!! :)

bialyhoo22
07-06-2010, 12:45 AM
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
07-06-2010, 02:31 AM
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
01-18-2011, 10:41 PM
john,

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

vitof123
01-10-2013, 03:14 PM
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
01-10-2013, 03:41 PM
See:

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