5

fancyBox v2 で少し問題が発生しました。

ボタンクリックでfancyBoxを起動したい。クリックすると、リストから ( の src 属性から) すべての画像が読み込まれます。

私がやろうとしていることを示すために、この jsfiddle を作成しました: http://jsfiddle.net/fPFZg/

jQuery(document).ready(function($) {
    $('button').on('click', function() {
        $.fancybox(); 
    });
});

これがどのように可能になるか、誰にもわかりますか？

4

4 に答える 4

8

同じ質問があり、次の方法がより簡単な方法であることがわかりました。

HTML

    <button class="fancybox" value="Open Fancybox">Open Fancybox</button>
    <div class="hidden" id="fancybox-popup-form">
        (your Fancybox content goes in here)
    </div>

jQuery

    $('.fancybox').click(function () {
        $.fancybox([
            { href : '#fancybox-popup-form' }
        ]);
    });

CSS

    .hidden { display: none; }

参考文献

Fancybox Docs (「API メソッド」タブをクリックし、「開く」と呼ばれる最初のメソッドを読んでください)。

于 2015-05-13T16:27:04.717 に答える
5

次のように使用できます。

    $.fancybox.open([
    {
        href : 'http://fancyapps.com/fancybox/demo/1_b.jpg',
        title : '1st title'
    },
    {
        href : 'http://fancyapps.com/fancybox/demo/2_b.jpg',
        title : '2nd title'
    }    
], {
    padding : 0   
});
于 2013-11-14T03:02:42.117 に答える
1

あなたのhtml:

<ul>
<li>
    <a href="http://placekitten.com/400/400" title="" class="fancybox">
        <img src="http://placekitten.com/100/100" alt="" />
    </a>
</li>

 <li>
    <a href="http://placekitten.com/400/400" title="" class="fancybox">
        <img src="http://placekitten.com/100/100" alt="" />
    </a>
</li>

<li>
    <a href="http://placekitten.com/400/400" title="" class="fancybox">
        <img src="http://placekitten.com/100/100" alt="" />
    </a>
</li>

<li>
    <a href="http://placekitten.com/400/400" title="" class="fancybox">
        <img src="http://placekitten.com/100/100" alt="" />
    </a>
</li>

あなたのjQuery:

 $(document).ready(function() {
$('button').on('click', function() {
    $.fancybox($("a.fancybox")); 
});});
于 2016-04-30T09:15:15.103 に答える