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 和 div id 中不能有空格或特殊字符。如果您使用页面标题，请使用 URL slug。

Answer 2

你的方法有很多问题：

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

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

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

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

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

fancybox 内的链接可以动态工作和加载内容（不绑定到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。

Answer 3

我想我已经弄清楚是什么导致了这个问题，至少对我来说是这样。

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

例如：

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

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

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

你会得到错误。尝试将 div 类更改为 popup-window 之类的东西 - 这应该可以解决您的错误

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

根据我的个人喜好，我不关心悬停时的激活。它变得非常混乱，尤其是当大多数人本能地点击图像时。但是在您的情况下，它会在悬停时打开，然后他们本能地单击，然后您会收到错误消息。

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

如果需要，请尝试为每张图片指定一个画廊名称实例，如下所示：rel="gallery"，然后看看会发生什么。您应该会看到下一个/上一个箭头并按预期工作。

但老实说，我会完全摆脱悬停功能。或者至少摆脱 mouseout() 这可能是最麻烦的部分。

只需使用它来调用 fancybox 操作：

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

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

希望对你有帮助。

Answer 4

我也遇到了这个问题。

事实证明，href url 是额外区分大小写的。 （如果可能的话）

无论是双重还是三重检查您的 href 网址，以确保您的大小写完全正确。

Answer 5

我的解决方案是：

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

Answer 6

如果某些图像显示而其他图像不显示，即使标记相同，请检查以下内容：

1. 尝试将文件名和 html 中的所有字母小写。 Fancybox 似乎非常区分大小写。
2. 检查图像是否具有所有允许的权限。我注意到我的照片在移动设备上无法正常工作，因为在我的电脑上，每个人的权限都设置为“无权限”。我将其更改为“只读”，它就像一个魅力！

Answer 7

我刚刚在我的本地机器上重新创建了你的测试，它对我来说很好（我从 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>

Answer 8

我正在检查所有可能性，并遇到了@BrettBumeter 提到的额外区分大小写问题。 事实上，它“非常区分大小写”，我不得不将我的图像的 URL (href) 路径从 *.jpg 改写为 *.JPG（或任何您的文件类型扩展名）。 改变这个解决了我的问题。

Answer 9

不要将 fancybox 类应用到你的 LI 元素上，而是应用到你的 A 元素上。

Answer 10

我在接受上述建议后，将href中的“.png”更改为“.PNG”。请注意，文件名是小写扩展名，但它仅适用于 href 中的大写扩展名（其余文件名相同）

希望这会有所帮助。

Answer 11

我的问题是提供不适当的图像路径，例如；

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

Answer 12

如果你想让 Fancybox 处理动态内容，你可以检查一下。

我使用的是以下代码：

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

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

所以，我使用了trim()，一切正常。