別のファンシーボックスを表示するファンシーボックスのリンク

Question

別のファンシーボックスを起動する（または現在のコンテンツを読み込む）ために、ファンシーボックス内にリンクがあることが時々意味があります。

ログインすると、ファンシーボックスのエラーメッセージが表示されます。また、ファンシーボックスを介して動作する「私のパスワードをメールで知らせる」ウィジェットもあります。 2つを組み合わせて（ファンシーボックス内で）言うことができます：

Bad password! 
<a href="#forgot-password">Forgot my password!</a> 

残念ながら、これはうまくいきません。

$('#fancybox-content a').live('click', function(){ 
     $(this).fancybox(); 
    }); 

驚くべきことに、働いていたこの種の：あなたは二回リンクにをクリックする必要があり、その後、正しいことが起こると私は、次のJSを追加することを検討しました。ああ。

最後に、私はハック醜い回避策を見出した（それが動作します！）：

$('#fancybox-content a').live('click', function(){ 

    var href = $(this).attr('href'); //assume there is a selector inside href 
    $.fancybox($(href).html());  //find the html manually and load 
    }); 

これを達成するための正しい方法は何ですか？

Answer 1

これは私が私のプロジェクトでは、この問題を解決する方法私です：

$('a.fancybox').live("click",function(event) { 
    event.preventDefault(); 
    var href = $(this).attr('href'); 
    $.fancybox({href: href}) 
}); 

新しい定義する必要はありませんので、あなたは.fancyboxクラスを持つ現在の国連の将来のA要素にfancyboxを追加することができます。このようにして、 fancyboxを開いた後のイベント。

Answer 2

プラグインからFancyboxを開くように要素に指示する必要があります。

どこかには、次のしている - >

$(document).ready(function(){ 
    $("#my_element").fancybox(); 
}); 

Fancyboxを開くための非常に基本的な機能だし、それだけではなく、それはまた、どのような要素のhrefに基づいて開くようになります。あなたはここで足の仕事をする必要はありません。

あなたが持っているのであれば - >

<a href="#forgot-password">Forgot my password!</a> 

は単純に、このような単純化のために 'X' として、IDを追加 - >

<a id="x" href="#forgot-password">Forgot my password!</a> 

を次に、この要素のFancyboxプラグインを有効にします。

$(document).ready(function(){ 
    $("#my_element").fancybox(); 

    //this is for our new container to fire 
    $("#x").fancybox(); 
}); 

これですべてが必要です。

Answer 3

バージョン2はすでに「ライブ」を使用しているので、クラス名は `$（"。fancybox "）。fancybox（）; ' - また、このForgot my password!でアヤックス