2

テンプレートを使用してサイトを構築していますが、デザイン用にハッキングしている非常に見栄えの良いギャラリー ページがあります。ページの CSS と HTML は、各サムネイルがそのサムネールの画像に関連するまったく新しいページに単純に開くという考えで作成されました。

しかし、私がやりたいことは、ページの各サムから別のオーバーレイされた Fancybox ギャラリーを開くことです。1 つのページで複数の 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>

スペースを節約するために、サムネイル コードの 1 つのインスタンスのみをコピーしたことに注意してください。現在、そのサムネイル ブロックのインスタンスは 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 に答える