javascript - FancyBox 返回 "The requested content cannot be loaded. Please try again later."和链接

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>

有谁知道可能导致问题的原因或我需要纠正的问题吗？

谢谢!

更新:1/19/2012 - 我在我的服务器上执行了与第一个答案 ( http://estorkdelivery.com/example/example.html ) 相同的测试，并发现我得到了相同的响应。所以看来这是我的服务器的问题。

我仍然需要有关此问题的帮助。大家有什么想法吗？

谢谢!

更新:2012 年 1 月 28 日 - 我一直在努力寻找此问题的解决方案，但我已经没有时间了，因此采用了完全不同的解决方案。我将保留这个问题，以防其他人遇到同样的错误或最终找到解决方案。谢谢!

Answer 1

您的方法有很多问题:

首先请记住，fancybox 从 href 获取其内容。绑定(bind)到它的任何选择器的属性，因此链接

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

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

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

非常明显，但在您的方法中，打开的 fancybox 内的链接(例如面向 yahoo)并未绑定(bind)到 fancybox 本身；它会再次尝试触发 Fancybox，但不会指示这次的内容应该是什么，因此会出现错误“无法加载请求的内容。请稍后再试”。换句话说，链接(内联内容内)<a href="http://yahoo.com" ...未绑定(bind)到 fancybox。

fancybox 内部的链接可以动态工作和加载内容(无需绑定(bind)到 fancybox)的唯一方法是当当前内容是外部 html 时文档和 fancybox type设置为iframe (不是你的情况)

第二，您打开了一个图像，因此 fancybox 设置 type至image默认情况下，但随后您假装在同一个盒子(例如雅虎)上加载不同类型的内容，这需要设置 type至iframe和其他选项，如 width和height .

第三，由于您使用的是内联内容，请注意 v1.3.x 中的现有错误及其解决方法，以避免出现进一步的问题，you can learn more here

最后，我不仅仅是在这里讲授，这更像是对你的问题发生的情况的解释......但好消息是你只需要添加更多行使其按照您想要的方式工作的代码:

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 正常工作(您的示例页面没有任何)。请参阅Unable to load google in iframe in fancybox进行解释。