FancyBox返回“无法加载请求的内容。请稍后再试。“与链接 [英] FancyBox returning "The requested content cannot be loaded. Please try again later." with link

问题描述

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

I'm using Fancybox to display inline content (a div with an image linked to a new page). The div and image display fine in the modal, but when the image is clicked to go to the new page, I get "The requested content cannot be loaded. Please try again later." error.

FancyBox javascript如下：

The FancyBox javascript is as follows:

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

并适用于以下HTML剪辑：

And applies to the following clip of 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>

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

Does anyone see what might be causing the issue or what I need to correct?

谢谢！

更新：1/19/2012 - 我在服务器上执行了相同的测试作为第一个答案（ http://estorkdelivery.com/example/example.html ）并找到我得到了相同的回复。所以它似乎与我的服务器有关。

Update: 1/19/2012 - I performed the same test on my server as the first answer (http://estorkdelivery.com/example/example.html) and found that I got the same response back. So it seems it's something with my server.

我仍然需要这个问题的帮助。有什么想法吗？

I still need help with this issue. Anyone have any ideas?

谢谢！

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

Update: 1/28/2012 - I've been working to find a solution for this problem, but I've run out of time and have gone with a completely different solution. I'm keeping this problem open in case anyone else runs across the same error or ultimately finds a solution. Thanks!

推荐答案

您的方法有很多问题：

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

First bear un mind that fancybox gets its content from the href attribute of any selector bound to it so the link

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

应通过以下脚本绑定到fancybox以便工作

should be bound to fancybox via the following script in order to work

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

非常明显，但在您的方法中，打开的fancybox内的链接（以雅虎为目标）例如）没有绑定到fancybox本身;它会尝试再次启动Fancybox但没有指示此次内容应该是什么，因此错误无法加载请求的内容。请稍后重试。换句话说，链接（在内联内容中）< a href =http://yahoo.com...... 未绑定到fancybox。

Pretty obvious but in your approach, the link inside the opened fancybox (which targets to yahoo for instance) is not bound to fancybox itself; it will try to fire Fancybox for sure again but with no indication of what the content should be this time, hence the error "The requested content cannot be loaded. Please try again later." in other words, the link (inside the inline content) <a href="http://yahoo.com" ... is not bound to fancybox.

当fancybox中的链接可以动态工作和加载内容（不受fancybox绑定）的唯一方法是当前内容为外部 html 文件和fancybox 类型设置为 iframe （不是你的情况）

The only way that links inside fancybox can work and load content dynamically (without being bound to fancybox) is when the current content is an external html document and fancybox type was set to iframe (not your case)

第二，您打开了一张图片，因此fancybox将类型设置为图片默认情况下，但是你假装在同一个盒子（例如雅虎）上加载不同类型的内容，这需要将类型设置为 iframe 以及其他选项，例如 width 和 height 。

Second, you opened an image so fancybox set the type to image by default, but then you are pretending to load a different type of content on the same box (yahoo for instance), which would require to set type to iframe and other options like width and height.

第三，因为您使用的是内联内容，请注意v1.3.x中的现有错误及其解决方法以避免进一步的问题， 你可以在这里了解更多信息

Third, since you are using inline content, please be aware of an existing bug in v1.3.x and its workaround to avoid further issues, you can learn more here

最后，我不是只是在这里讲课，它更像是对你的问题发生了什么的解释....但好消息是你只需要添加一些代码行就可以按照你想要的方式工作：

Last, I am not just lecturing here, it's more like the explanation of what is going on with your issue .... but the good news is that you just need to add some more lines of code to make it work the way you want:

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

1: you need to create a fancybox script for each type of content you want to open the second time (additionally to your existing one), so in your example you want to click the image inside fancybox and that should open yahoo ... then create this script

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

2：在你隐藏的内联内容集中该类的链接，所以这段代码：

2: within your hidden inline content set that class to the link, so this code:

<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）

Do the same for each hidden inline content. If you want to open another type of content in fancybox, just create a script accordingly. The rest of your code is OK (doesn't bother me to fire fancybox on hover)

SIDE NOTES ：google，yahoo等网站jquery和其他一些人不会在fancybox中打开。另外，请确保您拥有正确的 DOCTYPE ，以便fancybox正常工作（您的示例页面没有任何内容）。请参阅无法在fancybox中加载iframe中的google 解释。

SIDE NOTES: sites like google, yahoo, jquery and some others won't open in fancybox. Also make sure you have the proper DOCTYPE for fancybox to work properly (your sample page doesn't have any). See Unable to load google in iframe in fancybox for explanation.

这篇关于FancyBox返回“无法加载请求的内容。请稍后再试。“与链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！