Question

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

所以，我有以下设置：

主要页： 打开iframe并包含javascript函数以在fancybox中显示图像。出于测试目的，我还没有使用任何参数调用该函数，我使用硬编码图像，直到我得到它的工作。所以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

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

1 个答案: