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页面模板中完成此操作。任何帮助将不胜感激。

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/

Answer 2

尝试使用content argument到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>

使用wordpress中的fancybox加载内联内容

2 个答案: