在 wordpress 中使用 fancybox 加载内联内容答案

【问题标题】：Loading inline content using fancybox in wordpress在 wordpress 中使用 fancybox 加载内联内容
【发布时间】：2012-09-16 16:43:24
【问题描述】：

我正在尝试在自定义 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 页面模板中完成此操作。任何帮助将不胜感激。

【问题讨论】：

您使用的是哪个版本的 Fancybox？
我正在使用最新版本的 Fancybox。这是 2.1 IMO。

标签： jquery wordpress fancybox

【解决方案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/

【讨论】：

我不知道 Fancybox 会遵循内部 URL。好的！我的也可以，但是你的第一个不需要像我的 content 参数的例子是更清洁的 IMO。我喜欢它。

【解决方案2】：

尝试在 Fancybox 中使用content argument。

$(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>

【讨论】：