Javascript FancyBox returning“；无法加载请求的内容。请稍后再试。”；带链接

我使用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>

$（文档）.ready（函数（）{
$（“.fancybox”）.fancybox（）.hover（函数（）{
$（此选项）。单击（）；
});
$（“#fancybox outer”）.fancybox（）.mouseleave（函数（）{
$（“#fancybox覆盖”）。单击（）；
});
});

并应用于以下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日-我在服务器上执行了与第一个答案（）相同的测试，发现我得到了相同的响应。看来是我的服务器出了问题

在这个问题上我仍然需要帮助。有人有什么想法吗

谢谢

---

更新：2012年1月28日-我一直在为这个问题寻找解决方案，但我已经没有时间了，我选择了一个完全不同的解决方案。我将继续解决这个问题，以防其他人遇到相同的错误或最终找到解决方案。谢谢

我刚刚在我的本地机器上重新创建了您的测试，它对我来说运行良好（我从FancyBox安装的demo文件夹运行此测试）：

jQuery Fancybox测试
$（文档）.ready（函数（）{
$（“.fancybox”）.fancybox（）.hover（函数（）{
$（此选项）。单击（）；
});
$（“#fancybox outer”）.fancybox（）.mouseleave（函数（）{
$（“#fancybox覆盖”）。单击（）；
}); 
}); 

我想我已经找到了导致这个问题的原因，至少对我来说是这样

当您的一个元素上有一个与弹出类相同的类时，问题似乎就会出现

例如：

<a class="popup" href="#">Open the popup</a>

<div class="popup">some text</div>

您的弹出窗口中有相同类名的内容，例如：

<a class="popup" href="#">Open the popup</a>

<div class="popup">some text</div>

一些文本

你会得到错误。尝试将div类更改为类似于

弹出窗口的内容

——这将修复您的错误

在您的示例页面中，如果我不单击，它对我有效。当你点击时，你应该被带到哪个页面？你想让它转到下一张图片吗

根据我个人的喜好，我不喜欢悬停时的激活。这真的让人困惑，尤其是当大多数人本能地点击一张图片时。但在你的例子中，它在悬停时打开，然后他们本能地点击，然后你得到错误

当您只是使用通常适用的功能时，是否会出现同样的错误

如果需要，请尝试为每个图像指定一个库名实例，如下所示：

rel=“gallery”

，然后看看会发生什么。您应该可以看到下一个/上一个箭头，并按照您的预期工作

但老实说，我会完全放弃悬停功能。或者至少去掉mouseout（），这可能是最麻烦的部分

只需使用此命令调用fancybox操作：

$（[rel=gallery]）.fancybox（）

这样，您就可以摆脱所有可能导致问题的类

我希望这会有所帮助。
您的方法有很多问题：

首先请记住，fancybox的内容来自绑定到它的任何选择器的
href
属性，因此链接

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

很明显，但在你的方法中，打开的fancybox（比如针对雅虎的）内部的链接并不绑定到fancybox本身；它肯定会再次尝试启动Fancybox，但这次没有指示内容应该是什么，因此出现错误“无法加载请求的内容。请稍后重试”。换句话说，链接（内联内容内）

最后，我不只是在这里讲课，更像是在解释你的问题。。。。但好消息是，您只需要添加更多的代码行，以使其按您想要的方式工作：

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）

旁注：谷歌、雅虎、jquery等网站不会在fancybox中打开。另外，请确保您拥有正确的
DOCTYPE
，以便fancybox正常工作（您的示例页面没有任何文档）。请参阅以获取解释。
我对Fancybox也有同样的问题。
href
和
div id
中不能有空格或特殊字符。如果您使用的是页面标题，请使用URL段塞
 我也遇到了这个问题

事实证明，href url对大小写特别敏感。（如果可能的话）

不管怎样，都要对href URL进行两次、三次检查，以确保大小写完全正确
 我检查了所有的可能性，然后遇到了
    <script type="text/javascript">
    jQuery(document).ready(function() {

        $(".fancybox").click(function() {
            $.fancybox({
                'padding'       : 0,
                'autoScale'     : false,
                'transitionIn'  : 'none',
                'titleShow'     : false,
                'showCloseButton': true,
                'titlePosition' : 'inside',
                'transitionOut' : 'none',
                'title'         : '',
                'width'         : 640,
                'height'        : 385,
                'href'          : this.href,
                'type'          : 'iframe',
                'helpers'     : { 
                                'overlay' : {'closeClick': false}
                                }

            });

            return false;
        });
    });
    </script>

<a data-fancybox="gallery" href="../dist/imgs/nature/n1.png">
<img src="../dist/imgs/nature/n1.png"></a>

<a data-fancybox="gallery" href="imgs/nature/n1.png">
<img src="imgs/nature/n1.png"></a>

<a class="video__overlay" data-fancybox="gallery" href="<?= $blog_url ?>"></a>