-1

私は順不同のリストを持っています:

<ul>
    <li><a id="fancy_popup" href="popup.html" class="fancybox">
        Popup HTML Link</a></li>
    <li><a href="other.html">Other HTML Link</a></li>
    <li><a href="other.html">Other HTML Link</a></li>
</ul>

そして、私はjQueryスクリプトを持っています:

<script type="text/javascript">
$(document).ready(function() {
    $("#fancy_popup").fancybox({
        transitionIn    : 'elastic',
        transitionOut   : 'elastic',
        easingIn        : 'easeInSine',
        easingOut       : 'easeOutSine',
        speedIn         : 400,
        speedOut        : 200,
        titlePosition   : 'inside', 
        titleFormat     : 'document.write("Fancy Box Title");',
        cyclic          : true
    });
});
</script>

この jQuery Fancy Box スクリプトは他の場所で動作divするid="fancy_popup"ので、この場合はアンカーに直接追加しない理由を考えました...誰かがポップアップ HTML をクリックしたときに Fancy Box を適用する方法を見つけようとしています。上記のリンクをクリックすると、スクリプトに従って Fancy Box ウィンドウがポップアップします。

idに を配置し、これらのセレクターのスクリプトを操作liして、バリエーションを試しましたが、役に立ちませんでした。ulどんな助けでも大歓迎です。

4

3 に答える 3

1

fancyboxをアンカーにバインドする<a>のが通常の（そして最適な）方法なので、これは

<a id="fancy_popup" href="popup.html" class="fancybox">Popup HTML Link</a>

...完全に大丈夫です。

ここで、外部ページ（popup.html）を開いているので、コンテンツのタイプをiframe...に設定し、最終的にいくつかのディメンションを割り当てる必要がある場合があります。

<script type="text/javascript">
$(document).ready(function() {
    $("#fancy_popup").fancybox({
        transitionIn    : 'elastic',
        transitionOut   : 'elastic',
        easingIn        : 'easeInSine',
        easingOut       : 'easeOutSine',
        speedIn         : 400,
        speedOut        : 200,
        titlePosition   : 'inside', 
        titleFormat     : 'document.write("Fancy Box Title");',
        cyclic          : true,
        type            : "iframe",
        width           : 640, // or whatever
        height          : 320
    });
});
</script>

一方、fancyboxで他のhtmlファイルも開きたい場合があることを考慮して、IDの代わりにクラスを使用し、すべてのアンカーに同じクラスを追加します。

<li><a class="fancy_popup" href="popup.html">Popup HTML Link</a></li>
<li><a class="fancy_popup" href="other.html">Other HTML Link</a></li>
<li><a class="fancy_popup" href="other.html">Other HTML Link</a></li>

jQueryコードのセレクターを次のように変更します

$(".fancy_popup").fancybox( ..... )

したがって、複数の要素に同じスクリプトを使用できます。

于 2012-10-04T03:34:49.550 に答える
1

HTMLコード

<ul>
    <li><a id="fancy_popup" href="popup.html" class="fancybox">Popup HTML Link</a></li>
    <li><a href="other.html">Other HTML Link</a></li>
    <li><a href="other.html">Other HTML Link</a></li>
</ul>

Jクエリコード

<script type="text/javascript">
$(document).ready(function() {
    $("#fancy_popup").click(function(){
    $(this).fancybox({
        transitionIn    : 'elastic',
        transitionOut   : 'elastic',
        easingIn        : 'easeInSine',
        easingOut       : 'easeOutSine',
        speedIn         : 400,
        speedOut        : 200,
        titlePosition   : 'inside', 
        titleFormat     : 'document.write("Fancy Box Title");',
        cyclic          : true
        });
    });
});
</script>
于 2012-10-04T11:00:39.043 に答える
0

まず最初に、上記の回答に感謝します。この FancyBox がどのように機能するかを理解するのに本当に役立ちました。何らかの形で機能する必要があることはわかっていたので、この場合に行ったことは、基本に戻って単純なギャラリー アプローチを使用することでした。

ここで他の投稿も読みました。つまり、次のとおりです。

fancybox ヘルパー ボタンを表示できません

と

fancybox - d.onCleanup は関数ではありません

また、CSS ファイルを適切な場所に含めていないことにも気付きました。実際、愚かな間違いです。この場合、私はいくつかの異なるファイルを作成していて、一連のファイルの間違ったファイルに CSS が含まれていました。

再度、感謝します！

于 2012-10-04T19:06:00.597 に答える