从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

进入首页后，只需点击最左上方的图块（“已替换”！），即可打开一个包含一些文本和三个缩略图的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