Question

我正在使用一个模板来构建一个网站，它有一个非常好看的画廊页面，我正在为我的设计用途而攻击。该页面的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图库。非常感谢您的帮助！

Answer 1

$("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();

我可以从CSS类中已经建立的缩略图中打开多个Fancybox画廊吗？

1 个答案: