動的コンテンツのFancyboxをトリガーする

私の<a> Fancybox関数を呼び出すタグは、ajaxから呼び出した後に読み込まれます。リンクをクリックすると、モーダルウィンドウが表示されません。私は<a>を静的な方法で使用しようとしましたが、動作しますが、動的コードでは動作しません。私はまた、私のブラウザで「ソース」を見ると、そのタグは存在しないことに気づいた。どんな助け？ありがとう!!動的コンテンツのFancyboxをトリガーする

このコードはサーバー側から（私はjavaを使用しています）ajaxを呼び出した後に動的に作成されます。イムタグが同じクラス名を持つ複数のインスタンスことができるので、jQueryの関数に私のリンクとしてクラスを使用して：

<a class="link" href="#task" title="Details">View details</a> 
    <div style="display: none;"> 
     <div id="task" style="width:400px;height:100px;overflow:auto;"> 
      some data from the server. 
     </div> 
    </div>

これは私のfancybox機能である：

$("a.link").fancybox({ 
     'titlePosition' : 'inside', 
     'transitionIn' : 'none', 
     'transitionOut' : 'none' 
});

出典

2011-01-19 Brenard

潜在的な回答者にはいくつかのコードが役に立ちます:) – stecb

私はコードを追加しました。 – Brenard

何か提案がありますか？ – Brenard

あなたがでlivequeryを使用する必要がありますこの状況

出典

2011-01-19 09:10:58 rahul

ドキュメントが準備された後、新しい要素をDOMに動的に追加すると、fancyboxは新しい要素を「バインド」できなくなります。代わりにdelegate（）を使用してそれらの要素のイベントをリッスンし、このようなinfobox：

<html> 
<head> 
    <style> 
    p { background:yellow; font-weight:bold; cursor:pointer; 
     padding:5px; } 
    p.over { background: #ccc; } 
    span { color:red; } 
    </style> 

    <link rel="stylesheet" href="http://fancybox.net/js/fancybox-1.3.4/jquery.fancybox-1.3.4.css" type="text/css" /> 

    <script src="http://code.jquery.com/jquery-latest.js"></script> 
    <script type="text/javascript" src="http://pcapr.googlecode.com/svn-history/r75/trunk/script/fancybox/jquery.fancybox-1.3.4.js"></script> 

    <script type="text/javascript"> 

     $("body").delegate("#example7", "click", function(event) { 
      event.preventDefault(); 
      $.fancybox({ 
       //'modal': false, 
       //'padding'  : 0, 
       'transitionIn' : 'elastic', 
       'transitionOut' : 'fade', 
       'titlePosition': 'inside', 
       'autoDimensions': false, 
       'title': this.title, 
       'width': 400, 
       'height': 400, 
       'href': this.href, 
       'margin': 5, 
       'showCloseButton': true, 
       'autoScale':true, 
       'hideOnOverlayClick':true, 
       'hideOnContentClick':true, 
       'overlayShow': true 
       //'type': 'iframe' 
      } 

      ); 

     }); 
    </script> 
</head> 
<body> 
    <p><a title="Cras neque mi, semper at interdum id, dapibus in leo. Suspendisse nunc leo, eleifend sit amet iaculis et, cursus sed turpis." href="http://3.bp.blogspot.com/_167-sL7Cczk/TBiMz6jdtYI/AAAAAAAABcs/JxqC2vCIFa4/s1600/cute-puppy-dog-wallpapers.jpg" id="example7">hola, click me for fancybox</a></p> 

    <script type="text/javascript"> 


    </script> 
</body> 
</html>

少なくとも私のために働いた！がんばろう！

出典

2012-02-14 17:28:08 lito

このコードはギャラリーでは機能しません...最初の画像は問題ありませんが、次の/ prevに切り替えるとエラーになります。 – Sherzod

v2.0から始まるfancyBoxは、クリックイベントをバインドするために「ライブ」を使用するため、動的に作成される要素でも機能します。

出典

2012-06-12 13:43:18 Janis

https://github.com/moskis/fancybox-for-wordpressなどのプラグインがあるため、Fancybox 1を強制的に使用すると動作しません。 – bafromca

jQuery（）。live（ 'mouseenter'）を使用すると、ファンシーボックスを動的コンテンツに添付できます。

jQuery("a.fancybox").live('mouseenter', function(e){ 
    e.preventDefault(); 
    jQuery("a.fancybox").fancybox(); 
});

それだけ超える可能性の高い1枚の画像のみ可能とギャラリーを中断します「のMouseEnter」内の項目を探しますjQuery(this).fancybox();か、他を使用しないことを確認してください。

出典

2013-04-03 23:01:36 bafromca

動的コンテンツのFancyboxをトリガーする

答えて

関連する問題