0

私はSPAを作成し、デュランダルでホットタオルテンプレートを使用しようとしています。これまでのところ、スパにFancyboxを追加することに成功し、画像が表示されています

<a class="fancybox-thumb" rel="fancybox-thumb" href="http://farm9.staticflickr.com/8486/8225588056_d229e8fe57_b.jpg" title="Porth Nanven (MarcElliott)">
        <img src="IMAGEPATH" alt="" />
    </a>


$(document).ready(function () {
        $(".fancybox-thumb").fancybox({
            openEffect: 'elastic',
            closeEffect: 'elastic',
            helper: {
                title: {
                    type: 'outside'
                },
                thumbs: {
                    width: 50,
                    height: 50
                }
            }
        });

        $('#label').click(function () {
            $('#inline').fancybox();
        });

    });

これは適切に機能していませんが、問題ありません;）

今、私はこのようにファンシーボックスに独自のインラインを持ちたいです：

<div id="inline" style="display:none;width:500px;">
        <p>
            <a id="add_paragraph" title="Add" class="button button-blue" href="javascript:;">Add new paragraph</a>
            &nbsp;
            <a href="javascript:$.fancybox.close();">Close</a>
        </p>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </p>
</div>

クリックするといいえ：<a class="fancybox-thumb" href="#inline">Inline</a> 情報が記載されたファンシーボックスが表示されます。しかし、URLはlocalhost：2321 /＃inlineに設定されているため、ホームにリダイレクトされますが、fancyboxは表示されます。ファンシーボックスがSPAの正しいページに表示され、そこにとどまるようにするには、どうすればこれを解決できますか？

Gr。リロイ

4

2 に答える 2

0

私はこれを機能させました;）

これは私がしたことです、

HTML：

<a class="fancybox-link">Inline</a>    

    <div style="display: none">
        <div id="inlineContent" style="width:1000px;">
            <h2>Lorem ipsum dolor sit amet</h2>

            <p>
                <a id="add_paragraph" title="Add" class="button button-blue" href="javascript:;">Add new paragraph</a>
                &nbsp;
                <a href="javascript:$.fancybox.close();">Close</a>
            </p>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </p>
        </div>
    </div>

Javascript：

 $("a.fancybox-link").click(function (e) {
            $.fancybox({
                content: $('#inlineContent').html(),
                type: 'inline'             
            });
            return false;
        });

バイバイ

于 2013-03-20T12:41:38.740 に答える
0

すでにfancyboxを初期化した場合

$(".fancybox-thumb").fancybox({
    openEffect: 'elastic',
    closeEffect: 'elastic',
    helper: {
        title: {
            type: 'outside'
        },
        thumbs: {
            width: 50,
            height: 50
        }
    }
});

次に、画像とインラインコンテンツの両方に同じスクリプトを使用できるため、画像のリンクは次のようになります。

<a class="fancybox-thumb" rel="fancybox-thumb" href="http://farm9.staticflickr.com/8486/8225588056_d229e8fe57_b.jpg" title="Porth Nanven (MarcElliott)"><img alt="" src="http://farm9.staticflickr.com/8338/8224516167_bc7a5f6699_m.jpg" /></a>

およびインラインコンテンツへのリンク：

<a class="fancybox-thumb" data-fancybox-type="inline" href="#inline">Inline</a>

この特定のアイテムのコンテンツdata-fancybox-type="inline"を定義する属性を追加したことに注意してください。type

インラインHTML構造は同じままにすることができます：

<div id="inline" style="display:none;width:500px;">
    <p>
       <a id="add_paragraph" title="Add" class="button button-blue" href="javascript:;">Add new paragraph</a>
&nbsp; <a href="javascript:$.fancybox.close();">Close</a>
    </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

JSFIDDLEを参照してください

于 2013-03-21T17:12:09.007 に答える