从 iframe 间接调用的 Fancybox 2.1.3 返回“无法加载请求的内容。请稍后再试。'

Question

我正在努力设置最新的fancybox。我设法从 iframe 调用 fancybox 以在主页上打开，但它似乎没有找到内容。

所以，我有以下设置：

主页： 打开 iframe 并包含用于在 fancybox 中显示图像的 javascript 函数。 出于测试目的，我还没有使用任何参数调用该函数，而是使用硬编码的图像，直到我让它工作为止。所以javascript函数看起来像这样：

$jj = jQuery.noConflict();
function triggerFancybox(){
$jj(".triggerid").trigger("click");
alert("Fancybox triggered!");}
function callMe(){
$jj(".triggerid").fancybox('images/showroom/playground/displaced/dispm_6.jpg' , {'type' : 'image'});
triggerFancybox();}
function callMe1(){
$jj(".triggerid").fancybox('http://demo.artonbit.com/images/showroom/playground/displaced/dispm_6.jpg' , {'type' : 'image'});
triggerFancybox();}
function callMe2(){
$jj(".triggerid").fancybox('http://demo.artonbit.com/images/showroom/playground/displaced/dispm_6.jpg');
triggerFancybox();}

主页还包含一个虚拟元素，我用它来打开fancybox内容：

<a href="#" class="triggerid"></a>      <!-- This id can be called by an iframe for the fancybox> 

iframe： iframe 目前只包含 onclick 触发器，以下是最新尝试：

<p><a class="fancyframe" rel="group" href="images/showroom/playground/displaced/dispm_6.jpg" onclick="parent.callMe();return false;"><img style="float: left;" alt="PXM Commercial Shot1" src="images/showroom/playground/displaced/dispm_6.jpg" height="135" width="240" /> </a>
</p>
<p><a class="fancyframe" rel="group" href="images/showroom/playground/displaced/Disp_7b1.jpg" onclick="parent.callMe1();return false;"><img style="float: left;" alt="PXM Commercial Shot1" src="images/showroom/playground/displaced/dispm_6.jpg" height="135" width="240" /> </a>
</p>
<p><a class="fancyframe" rel="group" href="images/showroom/playground/displaced/dispm_9.jpg" onclick="parent.callMe2();return false;"><img style="float: left;" alt="PXM Commercial Shot1" src="images/showroom/playground/displaced/dispm_6.jpg" height="135" width="240" /> </a>
</p>
<p><a href="#" onclick="parent.callMe();return false;">Another Test</a>

所以，fancybox 被触发，但它找不到内容。我尝试了许多不同的调用fancybox的方法，但我总是得到标题中的错误消息。

图片参考是正确的。应包括所有必要的库。我以 id 作为目标对此进行了测试，目前我正在使用一个类（如 Fancybox FAQ 中所建议的那样）。

我错过了什么？

我首先使用较旧的 fancybox 1.3.4 实现了这一点，它运行良好。

您可以在此地址找到问题的运行演示： http://demo.artonbit.com

进入首页后，只需点击最左上角的图块（Displaced！），这将打开一个包含一些文本和三个缩略图的 iframe。这些是fancybox的触发器。他们成功调用了“callMe”方法，但是fancybox 找不到内容。

Answer 1

我检查的第一件事是你的网站和你加载的脚本，所以我认为你只需要一个 jQuery 实例，而不是用两个不同的版本和命名空间来复杂化自己......无论如何。

现在你的代码没有正确的格式，因为你或者：

1) 将 fancybox 绑定到一个选择器（例如一个类），例如：

$(".selector").fancybox({
  // API options
});

2) 手动调用fancybox

$.fancybox([
  href: 'images/showroom/playground/displaced/dispm_6.jpg'
],{
  // API options
  type: "image"
});

... 但不是：

$(".triggerid").fancybox('images/showroom/playground/displaced/dispm_6.jpg', { 
   // API options
   'type' : 'image'
});

...这是上述两者的混合。

在您的特定情况下，您只需在函数内部将 fancybox 脚本更改为正确的格式，例如：

function callMe(){
  $(".triggerid").fancybox({
      href: 'http://demo.artonbit.com/images/showroom/playground/displaced/dispm_6.jpg'
  });
  triggerFancybox();
}

...或使用您的命名空间$jj

注意：由于href 具有图像扩展名，因此您实际上不需要指定type: "image"

眼见为实......JSFIDDLE