2

我正在使用一个模板来构建一个网站，它有一个非常漂亮的画廊页面，我正在为我的设计使用它。页面的 CSS 和 HTML 是基于这样的想法编写的，即每个缩略图都会简单地打开到与该缩略图图像相关的全新页面。

然而，我想做的是从页面上的每个拇指打开一个不同的、覆盖的 Fancybox 画廊。我找到了很多与在单个页面上使用多个 Fancybox 画廊相关的答案，但没有具体到我想要做什么。

这是缩略图部分的 HTML：

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

请注意，我只复制了一个缩略图代码实例以节省空间。目前在设计中有 12 个该缩略图块的实例。

CSS 显然设置了缩略图的外观和功能，因为它们最初是编写的，所以我很好奇如何在这些参数内工作以从缩略图中启动一个独特的 Fancybox 画廊。非常感谢您的帮助！

4

1 回答 1

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

或者对于组使用属性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();
于 2012-12-13T19:56:14.180 回答