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

Question

提问by Yazmin

I'm using Fancybox to display inline content (a div with an image linked to a new page). The div and image display fine in the modal, but when the image is clicked to go to the new page, I get "The requested content cannot be loaded. Please try again later." error.

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

The FancyBox javascript is as follows:

FancyBox javascript 如下：

<script type="text/javascript">
    $(document).ready(function() {
        $(".fancybox").fancybox().hover(function() {
            $(this).click();
        });
        $("#fancybox-outer").fancybox().mouseleave( function() {
               $("#fancybox-overlay").click();
         });
    });
</script>

And applies to the following clip of HTML:

并适用于以下 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>

Does anyone see what might be causing the issue or what I need to correct?

有没有人看到可能导致问题的原因或我需要纠正的问题？

Thanks!

谢谢！

Update: 1/19/2012- I performed the same test on my server as the first answer (http://estorkdelivery.com/example/example.html) and found that I got the same response back. So it seems it's something with my server.

更新：2012年 1 月 19 日 - 我在我的服务器上执行了与第一个答案 ( http://estorkdelivery.com/example/example.html)相同的测试，发现我得到了相同的响应。所以这似乎与我的服务器有关。

I still need help with this issue. Anyone have any ideas?

我仍然需要帮助解决这个问题。谁有想法？

Thanks!

谢谢！

Update: 1/28/2012- I've been working to find a solution for this problem, but I've run out of time and have gone with a completely different solution. I'm keeping this problem open in case anyone else runs across the same error or ultimately finds a solution. Thanks!

更新：2012年 1 月28 日- 我一直在努力寻找解决此问题的方法，但我已经没有时间了，并且采用了完全不同的解决方案。如果其他人遇到相同的错误或最终找到解决方案，我会保持这个问题的开放性。谢谢！

Answer 1

回答by JFK

Your approach has many issues:

你的方法有很多问题：

Firstbear un mind that fancybox gets its content from the hrefattribute of any selector bound to it so the link

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

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

should be bound to fancybox via the following script in order to work

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

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

Pretty obvious but in your approach, the link inside the opened fancybox (which targets to yahoo for instance) is not bound to fancybox itself; it will try to fire Fancybox for sure again but with no indication of what the content should be this time, hence the error "The requested content cannot be loaded. Please try again later." in other words, the link (inside the inline content) <a href="http://yahoo.com" ...is not bound to fancybox.

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

The only way that links inside fancybox can work and load content dynamically (without being bound to fancybox) is when the current content is an external htmldocument and fancybox typewas set to iframe(not your case)

在fancybox 中的链接可以工作和动态加载内容（不绑定到fancybox）的唯一方法是当前内容是外部html文档并且fancyboxtype设置为iframe（不是你的情况）

Second, you opened an image so fancybox set the typeto imageby default, but then you are pretending to load a different type of content on the same box (yahoo for instance), which would require to set typeto iframeand other options like widthand height.

其次，你打开一个图像，这样的fancybox设置type到image默认，但你假装加载不同类型的内容在同一盒（雅虎实例），这就需要一套以type对iframe等选项，如width和height。

Third, since you are using inline content, please be aware of an existing bug in v1.3.x and its workaround to avoid further issues, you can learn more here

第三，由于您使用的是内联内容，请注意 v1.3.x 中的现有错误及其解决方法以避免进一步的问题，您可以在此处了解更多信息

Last, I am not just lecturing here, it's more like the explanation of what is going on with your issue .... but the good news is that you just need to add some more lines of code to make it work the way you want:

最后，我不只是在这里讲课，更像是解释您的问题发生了什么......但好消息是您只需要添加更多代码行即可使其按您想要的方式工作：

1: you need to create a fancybox script for each type of content you want to open the second time (additionally to your existing one), so in your example you want to click the image inside fancybox and that should open yahoo ... then create this script

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

$('.fancyframe').fancybox({
 'type':'iframe',
 'width': 600, //or whatever you want
 'height': 300
});

2: within your hidden inline content set that class to the link, so this code:

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>

now should look like

现在应该看起来像

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

Do the same for each hidden inline content. If you want to open another type of content in fancybox, just create a script accordingly. The rest of your code is OK (doesn't bother me to fire fancybox on hover)

对每个隐藏的内联内容执行相同的操作。如果你想在fancybox中打开另一种类型的内容，只需相应地创建一个脚本。你的其余代码没问题（不会打扰我在悬停时触发fancybox）

SIDE NOTES: sites like google, yahoo, jquery and some others won't open in fancybox. Also make sure you have the proper DOCTYPEfor fancybox to work properly (your sample page doesn't have any). See Unable to load google in iframe in fancyboxfor explanation.

边注：像 google、yahoo、jquery 和其他一些网站不会在 fancybox 中打开。还要确保您有合适DOCTYPE的fancybox 才能正常工作（您的示例页面没有）。请参阅无法在fancybox 中的 iframe 中加载 google 以获取解释。

Answer 2

回答by Jeremy Miller

I think I've figured out what's causing this issue, at least for me.

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

The problem seems to occur when you've got a class on one of your elements that is the same as the popup class.

当您在其中一个元素上拥有一个与弹出类相同的类时，问题似乎就会发生。

For instance:

例如：

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

And you have something in your popup with the same class name, for instance:

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

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

You'll get the error. Try changing the div class to something like popup-window- that should fix your error

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

In your example page, it works for me if I don't click. When you click, what page are you supposed to be taken to? Do you want it to just go to the next image?

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

In my personal preference, I don't care for the activation on hover. It gets really confusing, especially when most people go to instinctually click on an image. But in your case it opens on hover, then they click instinctually, then you get the error.

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

Do you get this same error when you're just using the functionality as it normally applies?

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

If you want, try to give each image a gallery name instance like so: rel="gallery"and see what happens. You should get the next/prev arrows showing up and working like you would expect.

如果你愿意，试着给每张图片一个画廊名称实例，就像这样：rel="gallery"看看会发生什么。您应该让下一个/上一个箭头显示并按预期工作。

But honestly, I would get rid of the hover functionality altogether. Or at least get rid of the mouseout() That's probably the most bothersome part.

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

Just use this to call the fancybox actions:

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

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

That way you can get rid of all of those classes that are probably causing the issues.

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

I hope that helps.

我希望这有帮助。

Answer 3

回答by Lodott1

If some of the images are showing and others are not, even though the markup is identical, then check this:

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

Try to lowercase all the letters in the filename and in the html. Fancybox seems to be quite case sensitive.
Check if the image has all the permissions allowed. I noticed my pictures didn't work properly on mobile because on my computer, everybody's permission was set to "no permission". I changed this to "read only" and it worked like a charm!

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

Answer 4

回答by Brett Bumeter

I just ran into this issue as well.

我也刚遇到这个问题。

As it turns out, the href url is EXTRA case sensitive. (if that is possible)

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

Regardless double, triple check your href urls to insure that you have the case exactly correct.

不管双重，三重检查您的 href 网址，以确保您的情况完全正确。

Answer 5

回答by T.Todua

my solution was:

我的解决方案是：

    <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

回答by Garrett

Don't apply the fancybox class to your LI element, do it to your A element.

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

Answer 7

回答by baron

I was checking out all the possibilities and ran into the EXTRA case sensitivity issue as @BrettBumeter mentioned. In fact, it is "so much case sensitive", I had to revrite the URL (href) path to my images from *.jpg to *.JPG (or whatever your file type extension might be). Altering this solved my issue.

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

Answer 8

回答by Orin

I just re-created your test on my local machine and it works fine for me (I ran this from the demo folder of the FancyBox install) :

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

回答by Drew Paul

I, after taking the above advice, changed ".png" to ".PNG" in the href. NOTE that the file names are a lower case extension but it only works with upper case extension in the href (rest of filename same)

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

Hope this helps.

希望这可以帮助。

Answer 10

回答by 7guyo

My problem was giving inappropriate path to image e.g;

我的问题是给出了不适当的图像路径，例如；

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

While the images loaded well locally, It could not do online. Correcting the path solved the problem.

虽然图像在本地加载良好，但它无法在线加载。更正路径解决了问题。

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

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

提问by Yazmin

回答by JFK

回答by Jeremy Miller

回答by Lodott1

回答by Brett Bumeter

回答by T.Todua

回答by Garrett

回答by baron

回答by Orin

回答by Drew Paul

回答by 7guyo

相关推荐

最近更新

标签

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

提问by Yazmin

回答by JFK

回答by Jeremy Miller

回答by Lodott1

回答by Brett Bumeter

回答by T.Todua

回答by Garrett

回答by baron

回答by Orin

回答by Drew Paul

回答by 7guyo

相关推荐

如何在 JavaScript 中定义一个可以在所有函数中访问的全局变量

Javascript 如何将 json 对象转换为警告框中的字符串？

Javascript jQuery：等待/延迟 1 秒而不执行代码

Javascript 可点击的大陆/国家地图：该走哪条路？

相关推荐

最近更新

标签