使用Jquery FancyBox包含DOM

Question

我正在尝试使用Fancy Box 2插件（fancyapps.com）。

一切都很好，除了我无法弄清楚如何正确包含DOM元素。

我在通过ajaxform和验证返回信息的表单提交后调用它。文档说要将以下内容用于dom。

//DOM element:

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

现在，如果我在div中的页面上创建一个id，它就不会拉它。 div也显示了。

我尝试使用其他方法（自定义对象）

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

它似乎不适用于php文件。我试图用一个php文件中的信息填充灯箱，但我收到错误加载内容。

Answer 1

你应该在这里使用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>

所有这些都基于其演示的源代码。 Demo page＆amp; http://fancybox.net/js/

<强>更新：

我使用fancyBox version 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"。

Answer 2

看来你错过了选择图片的ID。

ie：$（“＃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'
});

Answer 3

如果你使用div填充（通过php）id="inline"，那么这个脚本应该可以解决这个问题

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

我假设您在填充div（可能在另一个脚本中）之后将此脚本称为回调，但您没有提供有关如何触发fancybox的详细信息。