2

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

所以，我有以下设置：

main-page： 打开 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 找不到内容。

4

1 回答 1

0

我检查的第一件事是你的网站和你加载的脚本，所以我认为你只需要一个 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

于 2012-12-12T02:11:09.770 回答