Results 1 to 8 of 8

Thread: Image gallery with one thumbnail - Lightbox

  1. #1
    Join Date
    Jun 2010
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Image gallery with one thumbnail - Lightbox

    1) Script Title: Lightbox image viewer 2.03a

    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...box2/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!!!


    Thanks and have a good weekend.

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

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,496
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Quote Originally Posted by Cubikated View Post
    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:

    HTML Code:
    <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:

    HTML Code:
    <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:

    HTML Code:
    <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.
    Last edited by jscheuer1; 06-13-2010 at 09:30 PM. Reason: correct inconsistency between text and code
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Jun 2010
    Posts
    18
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Thumbs up Thank you!!!!!!

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

  4. #4
    Join Date
    Jul 2010
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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 : )

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,496
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    I'd try:

    Code:
    <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="">
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #6
    Join Date
    Feb 2010
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default links to examples

    john,

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

  7. #7
    Join Date
    Aug 2012
    Posts
    9
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

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

    egtoursdotcom/test.php


    Quote Originally Posted by jason_21218 View Post
    john,

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

  8. #8
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,496
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •