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

FancyBox returning "The requested content cannot be loaded. Please try again later." with link

本文关键字：quot 链接 返回 加载 请求 FancyBox      更新时间：2023-09-26

我使用Fancybox来显示内联内容（一个带有链接到新页面的图像的div）。div和image在模态中显示良好，但当单击image进入新页面时，我会收到"无法加载请求的内容。请稍后再试。"错误。

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日-我一直在努力寻找这个问题的解决方案，但我已经没有时间了，选择了一个完全不同的解决方案。我会保持这个问题的开放性，以防其他人遇到同样的错误或最终找到解决方案。谢谢

您的方法有很多问题：

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

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

应该通过以下脚本绑定到fancybox才能使用

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

很明显，但在你的方法中，打开的fancybox（，例如以雅虎为目标）内部的链接并不绑定到fancybox本身；它肯定会再次尝试激发Fancybox，但没有指示这次的内容，因此出现错误"无法加载请求的内容。请稍后再试。"换句话说，链接（内联内容内）<a href="http://yahoo.com" ...未绑定到Fancybox。

只有当当前内容是外部html文档并且fancybox type设置为iframe（不是您的情况）时，fancybox内部的链接才能动态工作和加载内容（而不绑定到fancybox）

第二个，您打开了一个图像，因此fancybox默认情况下将type设置为image，但随后您假装在同一个框上加载不同类型的内容（例如yahoo），这需要将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）

旁注：像谷歌、雅虎、jquery和其他一些网站不会在fancybox中打开。还要确保你有合适的DOCTYPE，以便fancybox正常工作（你的示例页面没有）。有关解释，请参阅fancybox中无法在iframe中加载谷歌。

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

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

例如：

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

你的弹出窗口中有一些具有相同类名的东西，例如：

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

你会得到错误的。尝试将div类更改为类似popup-window的类，这样可以修复错误

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

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

当你只是使用正常应用的功能时，你会遇到同样的错误吗？

如果你愿意，试着给每个图像一个库名称实例，比如：rel="gallery"，看看会发生什么。你应该让下一个/上一个箭头出现并像你期望的那样工作。

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

只需使用此调用fancybox操作：

$("a[rel=gallery]").fancybox();

这样你就可以去掉所有可能导致问题的类。

我希望这能有所帮助。

我刚刚也遇到了这个问题。

事实证明，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>

如果某些图像正在显示，而其他图像没有显示，即使标记是相同的，则检查此项：

  1. 尝试将文件名和html中的所有字母小写。Fancybox似乎对大小写很敏感
  2. 检查图像是否具有所有允许的权限。我注意到我的照片在手机上无法正常工作，因为在我的电脑上，每个人的权限都设置为"无权限"。我把它改成了"只读"，效果很好

我刚刚在本地机器上重新创建了你的测试，它对我来说很好（我从FancyBox安装的演示文件夹中运行了这个）：

<html>
<head>
<title>jQuery Fancybox Test</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js" type="text/javascript"></script>
<!-- Add fancyBox main JS and CSS files -->
<script type="text/javascript" src="../source/jquery.fancybox.js"></script>
<link rel="stylesheet" type="text/css" href="../source/jquery.fancybox.css" media="screen" />
</head>
<body>
<script type="text/javascript">
    $(document).ready(function () {
        $(".fancybox").fancybox().hover(function () {
            $(this).click();
        });
        $("#fancybox-outer").fancybox().mouseleave(function () {
            $("#fancybox-overlay").click();
        }); 
    }); 
</script>
    <li class="fancybox-outer"><a id="inline" href="#hover-image_0" class="fancybox">
        <img src="1_s.jpg" style="margin-top: 32px" />
    </a>
        <p>
            <a href="http://www.yahoo.com">Go to Yahoo</a></p>
        <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>
    </li>
    <li class="fancybox-outer"><a id="inline" href="#hover-image_1" class="fancybox">
        <img src="2_s.jpg" style="margin-top: 32px" />
    </a>
        <p>
            <a href="http://www.google.com">Go to Google</a></p>
        <div style="display: none;">
            <div id="hover-image_1">
                <a href="http://www.google.com">
                    <img src="2_b.jpg" class="img" /></a></div>
        </div>
    </li>
</body>
</html>

我对Fancybox也有同样的问题。href和div id中不能有空格或特殊字符。如果您正在使用页面标题，请使用URL段塞。

正如@BrettBumeter所提到的，我正在检查所有的可能性，并遇到了EXTRA病例敏感性问题。事实上，它"非常区分大小写"，我不得不将我的图像的URL（href）路径从*.jpg重新写入*.jpg（或任何文件类型的扩展名）。改变这个解决了我的问题。

不要将fancybox类应用于LI元素，而是应用于A元素。

I在接受上述建议后，将href中的".png"更改为".png"。注意，文件名是小写扩展名，但它只适用于href（文件名的其余部分相同）中的大写扩展名

希望这能有所帮助。

我的问题是给不合适的图像路径，例如

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

如果您正试图使Fancybox与动态内容一起工作，您可以检查此项。

我使用了以下代码：

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

我的问题是，我正在动态生成$blog_url，查看特定的文本文件行，所以在$blog_url的末尾添加了一个'n，而我没有注意到这一点。

所以，我使用了trim()，一切都按预期进行。

相关文章：