8

私は fancybox http://fancyapps.com/fancybox/を使用しています。私の質問は次のとおりです。

異なるリソースをグループ化できますか? 同じギャラリー (または「グループ」) 内のインラインまたはビデオを含む画像を意味します。はいの場合、誰も方法を知っていますか?

うまくいかない例を次に示します。

<a class="fancyinline" data-fancybox-group="testgroup" href="#cont3">Test</a>
<div class="fancyhidden" id="cont3">Test Content</div>
<a class="fancyimage" data-fancybox-group="testgroup" href="test.jpg" >
    <img src="test-th.jpg" alt="" />
</a>

fancyinline と fancyimage はグループ化されていませんが、グループ化する必要があります。もちろん、インラインと画像には異なるパラメーターが必要です...

前もって感謝します。

4

2 に答える 2

13

ファンシーボックス内のナビゲーション用に要素をグループ化するにはrel、それぞれに属性を設定する必要があります。同じrel値は、fancybox に、1 つが開かれた場合にそれらすべてがナビゲーションに存在することを伝えます。

この動くフィドルを見てください！

グループの例

HTML

<a rel="example_group" title="Custom title" href="full_path_to_image.jpg">
  <img alt="" src="path_to_image_thumbs.jpg">
</a>
<a rel="example_group" title="Custom title" href="full_path_to_image.jpg">
  <img alt="" src="path_to_image_thumbs.jpg">
</a>

Jクエリ

$("a[rel=example_group]").fancybox();

グループの例 1 表示、残りは非表示

HTML

<a rel="group2" title="Custom title" href="full_path_to_image.jpg">
  <img alt="" src="path_to_image_thumbs.jpg">
</a>
<a rel="group2" title="" href="full_path_to_img.jpg" style="display:none;"></a>
<a rel="group2" title="" href="full_path_to_img.jpg" style="display:none;"></a>
<a rel="group2" title="" href="full_path_to_img.jpg" style="display:none;"></a>

Jクエリ

$("a[rel=group2]").fancybox();
于 2012-05-20T19:58:06.120 に答える
0

私はこのようにします

$("#fancybox-manual-c").click(function() {
            $.fancybox.open([
                {
                    href : '1_b.jpg',
                    title : 'My title'
                }, {
                    href : '2_b.jpg',
                    title : '2nd title'
                }, {
                    href : '3_b.jpg'
                }
            ], {
                helpers : {
                    thumbs : {
                        width: 75,
                        height: 50
                    }
                }
            });
        });
于 2015-06-06T05:48:43.007 に答える