我使用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>
如果某些图像正在显示,而其他图像没有显示,即使标记是相同的,则检查此项:
- 尝试将文件名和html中的所有字母小写。Fancybox似乎对大小写很敏感
- 检查图像是否具有所有允许的权限。我注意到我的照片在手机上无法正常工作,因为在我的电脑上,每个人的权限都设置为"无权限"。我把它改成了"只读",效果很好
我刚刚在本地机器上重新创建了你的测试,它对我来说很好(我从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()
,一切都按预期进行。