FancyBox返回"无法加载请求的内容.请稍后再试." 与链接

Question

我正在使用Fancybox显示内联内容(带有链接到新页面的图像的div).模式中的div和图像显示正常,但是当单击图像转到新页面时,我得到"无法加载请求的内容.请稍后重试." 错误.

FancyBox javascript如下:

<script type="text/javascript">
    $(document).ready(function() {
        $(".fancybox").fancybox().hover(function() {
            $(this).click();
        });
        $("#fancybox-outer").fancybox().mouseleave( function() {
               $("#fancybox-overlay").click();
         });
    });
</script>

并适用于以下HTML剪辑:

<li class="fancybox-outer">
    <a id="inline" href="#hover-image_0" class="fancybox">
        <img src="http://website.com/file/id:63" style="margin-top: 32px" />
    </a>
    <p><a href="http://website.com/template/view/18">1G2A</a></p>
    <div style="display: none;"><div id="hover-image_0"><a href="http://website.com/template/view/18"><img src="http://website.com/file/id:64/ext:.png" class="img" /></a></div></div>
</li>

<li class="fancybox-outer">
    <a id="inline" href="#hover-image_1" class="fancybox">
        <img src="http://website.com/file/id:60" style="margin-top: 32px" />
    </a>
    <p><a href="http://website.com/template/view/17">17</a></p>
    <div style="display: none;"><div id="hover-image_1"><a href="http://website.com/template/view/17"><img src="http://website.com/file/id:61/ext:.png" class="img" /></a></div></div>
</li>

有谁看到可能导致问题的原因或我需要纠正的内容？

谢谢!

更新:2012年1月19日 - 我在我的服务器上执行了与第一个答案(http://estorkdelivery.com/example/example.html)相同的测试,发现我得到了相同的回复.所以它似乎与我的服务器有关.

我仍然需要帮助解决这个问题.有人有主意吗？

谢谢!

更新:2012年1月28日 - 我一直在努力为这个问题找到解决方案,但我已经没时间了,并且采用了完全不同的解决方案.我保持这个问题是开放的,以防其他人遇到相同的错误或最终找到解决方案.谢谢!

Answer 1

你的方法有很多问题:

首先要记住,fancybox从href绑定到它的任何选择器的属性获取其内容,以便链接

<a class="fancybox" href="{target}" ...

应该通过以下脚本绑定到fancybox才能工作

$('.fancybox').fancybox();

很明显,但在你的方法中,打开的fancybox(例如以yahoo为目标)内的链接不受fancybox本身的约束; 它会尝试再次启动Fancybox但没有指示此次内容应该是什么,因此错误" 无法加载请求的内容.请稍后重试." 换句话说,链接(内联内容内)<a href="http://yahoo.com" ...未绑定到fancybox.

在fancybox中链接的唯一方法是动态工作和加载内容(不受fancybox绑定)是当前内容是外部html文档并且fancybox type设置为iframe(不是你的情况)

其次,你打开一个图像,这样的fancybox设置type到image默认,但你假装加载不同类型的内容在同一盒(雅虎实例),这将需要设置type到iframe像和其他选项width和height.

第三,由于您使用的是内联内容,请注意v1.3.x中的现有错误及其解决方法以避免进一步的问题,您可以在此处了解更多信息

最后,我不仅仅是在这里讲课,更像是对你的问题的解释......但好消息是你需要添加更多的代码行以使其按照你想要的方式工作:

1:你需要为你想要第二次打开的每种类型的内容创建一个fancybox脚本(除了你现有的内容),所以在你的例子中你想点击fancybox里面的图像,那应该打开yahoo ...然后创建这个脚本

$('.fancyframe').fancybox({
 'type':'iframe',
 'width': 600, //or whatever you want
 'height': 300
});

2:在你的隐藏内联内容中设置该类到链接,所以这段代码:

<div style="display: none;">
 <div id="hover-image_0">
  <a href="http://www.yahoo.com"><img src="1_b.jpg" class="img" /></a>
 </div>
</div>

现在应该是这样的

<div style="display: none;">
 <div id="hover-image_0">
  <a class="fancyframe" href="http://www.yahoo.com"><img src="1_b.jpg" class="img" /></a>
 </div>
</div>

对每个隐藏的内联内容执行相同操作.如果要在fancybox中打开其他类型的内容,只需相应地创建一个脚本.你的其余代码都没问题(不会打扰我在悬停时启动fancybox)

侧面注意:google,yahoo,jquery和其他一些网站将无法在fancybox中打开.还要确保你有适当DOCTYPE的fancybox正常工作(你的样本页面没有任何).请参阅无法在fancybox中加载iframe中的google以获取解释.