Question

I am using a template to build a site and it has a very nice-looking gallery page that I am hacking up for my design use. The CSS and HTML for the page were written with the idea that each thumbnail would simply open to an entirely new page related to that thumb’s image.

What I want to do, however, is to open a different, overlaid Fancybox gallery from each thumb on the page. I have found a lot of answers related to using multiple Fancybox galleries on a single page, but nothing specific to what I want to do.

Here is the HTML for the thumbnail section:

    <div id="album-shelves">
    <h1 class="heading colr">Check out some of the great area events we cover!</h1>
    <div class="inner">
        <!-- Columns Section Start -->
        <ul class="album-list">
            <li>
                    <a href="album-detail.html" class="thumb"><img src="images/ascutneythumb.jpg" alt="" /></a>
                <h3><a href="album-detail.html" class="colr">Irene Benefit - Ascutney, VT</a></h3>
                <p>
                    Lorem ipsum and blah, blah, blah....![enter image description here][1]<a href="#">Read More</a>
                </p>
                <a href="album-detail.html" class="bigbutton">VIEW DETAIL</a>
            </li>

        </ul>
        <div class="clear"></div>
        <!-- Columns Section End -->
    </div>
</div>
<!-- Album Shades End -->
<div class="clear"></div>

Note that I only copied over ONE instance of the thumbnail code to save space. There are currently 12 instances of that thumbnail block in the design.

The CSS obviously sets up the look and function of the thumbnails as they were originally written so I’m curious how to work within those parameters to launch a unique Fancybox gallery from the thumbnails. Thanks a ton for any assistance!

Answer 1

$("a.thumbs").fancybox({
        'transitionIn'  :   'elastic',
        'transitionOut' :   'elastic',
        'speedIn'       :   600, 
        'speedOut'      :   200, 
        'overlayShow'   :   false
    });

Or for groups use the attribute rel

/* HTML */
<a class="grouped_elements" rel="group1" href="image_big_1.jpg"><img src="image_small_1.jpg" alt=""/></a>
<a class="grouped_elements" rel="group1" href="image_big_2.jpg"><img src="image_small_2.jpg" alt=""/></a>   

<a class="grouped_elements" rel="group2" href="image_big_3.jpg"><img src="image_small_3.jpg" alt=""/></a> 
<a class="grouped_elements" rel="group2" href="image_big_4.jpg"><img src="image_small_4.jpg" alt=""/></a> 

/* This will create two galleries */

$("a.grouped_elements").fancybox();