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

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 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".

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'
});

score 0 · Accepted Answer

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

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

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

3 回答 3