在WordPress中使用fancybox加载内联内容

Question

我正在尝试在自定义的WordPress页面模板中使用Fancybox加载内联内容。灯箱显示出来了，但是显示以下错误而不是内联内容。

错误信息："无法加载请求的内容。请稍后再试。"

这是我使用的JavaScript代码：

$(document).ready(function($) {
    $('a[href="#contact"]').fancybox({
        helpers: {
            overlay: {
                opacity: 0.98,
                css: { 'background-color': '#fff' }
            }
        }
    });
});

以下是我想要使用Fancybox显示的HTML。

<a href="#contact">Inline content over here.</a>

请注意，我正在尝试在自定义的WordPress页面模板中完成此操作。非常感谢任何帮助。

- akshitsethi

---

你使用的是哪个版本的Fancybox？ - jimp

我正在使用最新版本的Fancybox。在我看来，它是2.1版。 - akshitsethi

Answer 1

您需要更改您的HTML代码：

HTML：

 <a href="#contact">Inline content over here.</a>
 <div id="contact" style="display:none">Inline content over here</div>
    ​

示例: http://jsfiddle.net/fU54x/839/

如果您想保留相同的HTML，并仅显示<a>标记中的内容，则必须以此模式更改Lightbox脚本:

相同的HTML：

<a href="#contact">Inline content over here.</a>

JS：

$('a[href="#contact"]').click(function(){
    var $this = $(this);
  $.fancybox({
        helpers: {
            overlay: {
                opacity: 0.98,
                css: { 'background-color': '#fff' }
            }
        },
      content: $this.html()
    });
});

我已经更新了示例：

点击这里：http://jsfiddle.net/fU54x/840/

- AlexC

---

我不知道Fancybox会跟随内部URL。太好了！我的也可以工作，但是你的第一个例子不需要像我的那样使用content参数，我认为更简洁。我喜欢它。 - jimp

Answer 2

尝试使用内容参数到Fancybox。

$(document).ready(function($) {
    var inlineContent = $('#inlineContent').html();
    $('a[href="#contact"]').fancybox({
        content: inlineContent,
        helpers: {
            overlay: {
                opacity: 0.98,
                css: { 'background-color': '#fff' }
            }
        }
    });
});

标记：

<a href="#contact">Link</a>
<div id="inlineContent" style="display:none;">Inline content over here.</div>

- jimp