php - Jquery FancyBox に DOM を含める

Question

Fancy Box 2 プラグイン (fancyapps.com) を使用しようとしています。

DOM要素を適切に含める方法がわからないことを除けば、すべて問題ありません。

ajaxformと検証を介して情報を返すフォーム送信後にこれを呼び出しています。ドキュメンテーションには、dom に以下を使用するように記載されています。

//DOM element:

$.fancybox( $("#inline"), {
    title : 'Custom Title'
});

ページの id を div で作成しても、プルされません。また、divが表示されます。

別の方法（カスタムオブジェクト）を使ってみた

$.fancybox({
    href: 'example.jpg',
    title : 'Custom Title'
});

phpファイルでは動作しないようです。PHP ファイルからの情報をライトボックスに入力しようとしていますが、コンテンツの読み込み中にエラーが発生します。

score 0 · Accepted Answer

（phpを介して）にdivを入力しているid="inline"場合、このスクリプトはトリックを実行する必要があります

$.fancybox({
 href  : "#inline",
 title : 'Custom Title'
});

（おそらく別のスクリプト内に）データを入力した後、このスクリプトをコールバックとして呼び出すと思いますが、divfancyboxがどのように起動されるかについての詳細は提供していません。

score 0 · Accepted Answer

おそらくajax()ここで使用する必要があります。

FancyBox プラグインを調べると、ajax がサポートされています。

$("#various3").fancybox({
    ajax: {
        type: "POST",
        data: 'mydata=test'
    }
});

HTML

<li><a id="various3" href="/data/login.php">Ajax - passing custom data</a></li>

これらはすべて、デモのソースコードに基づいています。デモページ& http://fancybox.net/js/ .

更新：

あなたの質問に関連して、fancyBox バージョン 2を使用して簡単なテストを行いました。

私は ajax コンテンツをプルすることを達成します:

$(document).ready(function() {
    $('.fancybox').fancybox({
        title: 'Custom Title'
    });
});

HTML

<a class="fancybox fancybox.ajax" href="ajax.txt">Show content</a>
<div id="content">
</div>

ここでの重要な部分は、クラスにclass="fancybox fancybox.ajax".

score 0 · Accepted Answer

写真のIDへのセレクターが欠落しているようです。

すなわち: $("#inline")

$.fancybox( $("#inline"), {
  href: 'example.jpg',
  title : 'Custom Title'
});

また

$("#inline").fancybox( {
  href: 'example.jpg',
  title : 'Custom Title'
});

ID の代わりにクラスを使用して照合することもできます。

$(".inline").fancybox(
  href: 'example.jpg',
  title : 'Custom Title'
});

3 に答える 3