将 DOM 与 Jquery FancyBox 一起包含在内 - Include DOM with Jquery FancyBox

Include DOM with Jquery FancyBox

我正在尝试使用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 文件中的信息填充灯箱，但加载内容时出错。

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

您

似乎缺少图片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'
});

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

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

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