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

Question

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

29

我正在使用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日 - 我一直在寻找解决此问题的方法，但已经没有时间了，我已经采用了完全不同的解决方案。如果其他人遇到同样的错误或最终找到解决方案，请保持对这个问题的关注。谢谢！

- Yazmin

12个回答

2

我想我已经找到了导致这个问题的原因，至少对我来说是这样。问题似乎出现在您的元素中有一个与弹出窗口类相同的类时。

例如：

<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(); 这样，你就可以摆脱所有可能引起问题的类。

希望这可以帮助你。

- Jeremy Miller

感谢您深思熟虑的回复，我很感激。使用我设置的示例页面，您可以看到我没有任何重复的类，但行为仍在发生...或者我可能误解了您的解释。如果您查看代码，您可以从内联内容中看到每个图像应该链接到一个新页面 - 在示例中，一个链接到Google，另一个链接到Yahoo。不幸的是，我必须保留鼠标悬停和鼠标移出功能，以满足对我的要求。 - Yazmin

唯一要说的是，我建议您尝试将其恢复到最基本的设置，然后逐步向后操作。 - Jeremy Miller

1

如果一些图片显示而另一些不显示，即使标记相同，请检查以下内容：

尝试将文件名和HTML中的所有字母都转换为小写。Fancybox似乎对大小写敏感。
检查图像是否具有所有允许的权限。我注意到我的图片在移动设备上无法正常工作，因为在我的电脑上，每个人的权限都设置为“没有权限”。我将其更改为“只读”，它就像魔法般地奏效了！

- Lodott1

1

我也遇到了这个问题。

事实证明，href链接是额外区分大小写的。(如果可能的话)

无论如何，要仔细检查你的href链接，确保大小写完全正确。

- Brett Bumeter

1

我的解决方案是：

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

- T.Todua

0

我正在检查所有可能性，遇到了@BrettBumeter提到的额外大小写敏感性问题。实际上，它是“如此大小写敏感”，我不得不将我的图片URL（href）路径从*.jpg更改为*.JPG（或您的文件类型扩展名），这样调整解决了我的问题。

- baron

0

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

- Garrett

0

在采纳上述建议后，我将 href 中的“.png”更改为“.PNG”。请注意，文件名是小写扩展名，但只有在 href 中使用大写扩展名（文件名的其余部分相同）才能正常工作。

希望这可以帮到你。

- Drew Paul

这很可能是因为您的服务器区分大小写（Linux？）与Fancybox无关。 - bg17aw

0

我也遇到了Fancybox的同样问题。你不能在href和div id中使用空格或特殊字符。如果你正在使用页面标题，请使用URL slug。

- Hassan

0

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

- Orin

我猜测代码的其他部分影响了FancyBox的显示...这是网站链接：http://estorkdelivery.com/template - Yazmin

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- JFK · Accepted Answer

您的方法存在许多问题：

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

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

应该通过以下脚本将其绑定到fancybox，以便正常工作。

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

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

唯一的方法是使fancybox内部的链接工作并动态加载内容（而不绑定到fancybox）是当前内容为外部html文档，并且fancybox类型设置为iframe（不是您的情况）。

其次，您打开了一个图像，因此fancybox默认将类型设置为image，但然后您要在同一个框中假装加载不同类型的内容（例如雅虎），这需要将类型设置为iframe和其他选项，如width和height。

第三，由于您正在使用行内内容，请注意v1.3.x中存在的一个现有错误及其解决方法，以避免进一步问题。您可以在此处了解更多信息最后，我不仅是在讲课，更像是对您的问题进行解释...但好消息是，您只需要添加更多代码即可使它按您想要的方式工作：

1：您需要为您想要第二次打开的每种类型的内容创建一个fancybox脚本（除了您现有的脚本），因此在您的示例中，您希望单击fancybox中的图像，然后打开雅虎...然后创建此脚本。

$('.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中打开另一种类型的内容，只需相应地创建一个脚本。您的其余代码是OK的（悬停时触发fancybox不会影响我）。附注：像Google、Yahoo、jQuery和其他一些网站无法在fancybox中打开。此外，请确保您有适当的DOCTYPE以使fancybox正常工作（您的示例页面没有任何DOCTYPE）。请参见无法在fancybox中加载Google iframe以获取解释。