Fancybox - “无法加载请求的内容。”
Posted
技术标签:
【中文标题】Fancybox - “无法加载请求的内容。”【英文标题】：Fancybox - "The requested content cannot be loaded." 【发布时间】：2012-10-22 20:28:42 【问题描述】：我的投资组合中的 Fancybox 出现问题。它适用于除一个以外的每一页 - http://pandadol.com/candyshop.html。
图片 7, 8, 9, 11, 12, 13, 23, 24, 25, 27 给我一个“请求的内容无法加载错误”，在新标签页中打开它们返回“你没有访问此服务器上的 /pics/candyshop/7.jpg 的权限。此外，在尝试使用 ErrorDocument 处理请求时遇到 404 Not Found 错误。"
所有图片肯定都在服务器上。这是代码-
<script language="javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
<script type='text/javascript'>
$(document).ready(function()
// ios Hover Event Class Fix
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i)))
$(".menu").click(function() // Update class to point at the head of the list
);
);
</script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-24042513-1']);
_gaq.push(['_trackPageview']);
(function()
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
)();
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script>
!window.jQuery && document.write('<script src="jquery-1.4.3.min.js"><\/script>');
</script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<link rel="stylesheet" href="/fancybox/jquery.fancybox.css" type="text/css" media="screen" />
<script type="text/javascript" src="/fancybox/jquery.fancybox.pack.js"></script>
</script>
<!-- Add jQuery library -->
<script type="text/javascript" src="../lib/jquery-1.8.0.min.js"></script>
<!-- Add mousewheel plugin (this is optional) -->
<script type="text/javascript" src="../lib/jquery.mousewheel-3.0.6.pack.js"></script>
<!-- Add fancyBox main JS and CSS files -->
<script type="text/javascript" src="../source/jquery.fancybox.js?v=2.1.0"></script>
<link rel="stylesheet" type="text/css" href="../source/jquery.fancybox.css?v=2.1.0" media="screen" />
<!-- Add Button helper (this is optional) -->
<link rel="stylesheet" type="text/css" href="../source/helpers/jquery.fancybox-buttons.css?v=1.0.3" />
<script type="text/javascript" src="../source/helpers/jquery.fancybox-buttons.js?v=1.0.3"></script>
<!-- Add Thumbnail helper (this is optional) -->
<link rel="stylesheet" type="text/css" href="../source/helpers/jquery.fancybox-thumbs.css?v=1.0.6" />
<script type="text/javascript" src="../source/helpers/jquery.fancybox-thumbs.js?v=1.0.6"></script>
<!-- Add Media helper (this is optional) -->
<script type="text/javascript" src="../source/helpers/jquery.fancybox-media.js?v=1.0.3"></script>
<script type="text/javascript">
$(document).ready(function()
/*
* Simple image gallery. Uses default settings
*/
$('.fancybox').fancybox();
/*
* Different effects
*/
// Change title type, overlay closing speed
$(".fancybox-effects-a").fancybox(
helpers:
title :
type : 'outside'
,
overlay :
speedOut : 0
);
// Disable opening and closing animations, change title type
$(".fancybox-effects-b").fancybox(
openEffect : 'none',
closeEffect : 'none',
helpers :
title :
type : 'over'
);
// Set custom style, close if clicked, change title type and overlay color
$(".fancybox-effects-c").fancybox(
wrapCSS : 'fancybox-custom',
closeClick : true,
openEffect : 'none',
helpers :
title :
type : 'inside'
,
overlay :
css :
'background' : 'rgba(238,238,238,0.85)'
);
// Remove padding, set opening and closing animations, close if clicked and disable overlay
$(".fancybox-effects-d").fancybox(
padding: 0,
openEffect : 'elastic',
openSpeed : 150,
closeEffect : 'elastic',
closeSpeed : 150,
closeClick : true,
helpers :
overlay : null
);
/*
* Button helper. Disable animations, hide close button, change title type and content
*/
$('.fancybox-buttons').fancybox(
openEffect : 'none',
closeEffect : 'none',
prevEffect : 'none',
nextEffect : 'none',
closeBtn : false,
helpers :
title :
type : 'inside'
,
buttons :
,
afterLoad : function()
this.title = 'Image ' + (this.index + 1) + ' of ' + this.group.length + (this.title ? ' - ' + this.title : '');
);
/*
* Thumbnail helper. Disable animations, hide close button, arrows and slide to next gallery item if clicked
*/
$('.fancybox-thumbs').fancybox(
prevEffect : 'none',
nextEffect : 'none',
closeBtn : false,
arrows : false,
nextClick : true,
helpers :
thumbs :
width : 50,
height : 50
);
/*
* Media helper. Group items, disable animations, hide arrows, enable media and button helpers.
*/
$('.fancybox-media')
.attr('rel', 'media-gallery')
.fancybox(
openEffect : 'none',
closeEffect : 'none',
prevEffect : 'none',
nextEffect : 'none',
arrows : false,
helpers :
media : ,
buttons :
);
/*
* Open manually
*/
$("#fancybox-manual-a").click(function()
$.fancybox.open('1_b.jpg');
);
$("#fancybox-manual-b").click(function()
$.fancybox.open(
href : 'iframe.html',
type : 'iframe',
padding : 5
);
);
$("#fancybox-manual-c").click(function()
$.fancybox.open([
href : '1_b.jpg',
title : 'My title'
,
href : '2_b.jpg',
title : '2nd title'
,
href : '3_b.jpg'
],
helpers :
thumbs :
width: 75,
height: 50
);
);
);
</script>
<script type="text/javascript">
$(document).ready(function()
$(".fancybox").fancybox();
);
</script>
</head>
<body>
<div id="wrapper">
<div class="header clear">
<h1 class="title"><a href="http://pandadol.com/">RACHEL SHI<br></a></h1>
<h1 class="title">DESIGN + ILLUSTRATION</h1>
<ul class="menu">
<li class="first">Menu<div class="droparrow"></div></li>
<li><a href="http://pandadol.com/info.html">about</a></li>
<li><a href="http://twitter.com/pandadol">@pandadol</a></li>
<li><a href="http://pandadol.tumblr.com">pandadol.tumbl</a></li>
<li><a href="http://pinterest.com/pandadol">pinterest</a></li>
<li><a href="http://instagrid.me/pandadol">instagram</a></li>
<li><a href="/cv.pdf">cv</a></li>
</ul>
</div>
<div class="content">
<div class="post-meta">
<h1>The Candy Shop Project</h1>
<div class="post-date"> 2012<P>
<b>Personal</b><br>
For 5 months I was a sales assistant at a candy shop. I took any lull in activity to draw customers. Here are the results.
</div>
</div>
<div class="post-content">
<p>
<a class="fancybox" href="../pics/candyshop/1.jpg" data-fancybox-group="gallery"><img src="../pics/candyshop/1.jpg" / ></a>
<a class="fancybox" href="../pics/candyshop/2.jpg" data-fancybox-group="gallery"><img src="../pics/candyshop/2_s.jpg" /></a>
<a class="fancybox" href="../pics/candyshop/3.jpg" data-fancybox-group="gallery"><img src="../pics/candyshop/3_s.jpg" /></a>
<a class="fancybox" href="../pics/candyshop/4.jpg" data-fancybox-group="gallery"><img src="../pics/candyshop/4_s.jpg" /></a>
<a class="fancybox" href="../pics/candyshop/5.jpg" data-fancybox-group="gallery"><img src="../pics/candyshop/5_s.jpg" /></a>
<a class="fancybox" href="../pics/candyshop/6.jpg" data-fancybox-group="gallery"><img src="../pics/candyshop/6_s.jpg" /></a>
<a class="fancybox" href="../pics/candyshop/7.jpg" data-fancybox-group="gallery"><img src="../pics/candyshop/7_s.jpg" /></a>
<a class="fancybox" href="../pics/candyshop/8.jpg" data-fancybox-group="gallery"><img src="../pics/candyshop/8_s.jpg" /></a>
<a class="fancybox" href="../pics/candyshop/9.jpg" data-fancybox-group="gallery"><img src="../pics/candyshop/9_s.jpg" /></a>
<a class="fancybox" href="../pics/candyshop/10.jpg" data-fancybox-group="gallery"><img src="../pics/candyshop/10_s.jpg" /></a>
<a class="fancybox" href="../pics/candyshop/11.jpg" data-fancybox-group="gallery"><img src="../pics/candyshop/11_s.jpg" /></a>
<a class="fancybox" href="../pics/candyshop/12.jpg" data-fancybox-group="gallery"><img src="../pics/candyshop/12_s.jpg" /></a>
<a class="fancybox" href="../pics/candyshop/13.jpg" data-fancybox-group="gallery"><img src="../pics/candyshop/13_s.jpg" /></a>
<a class="fancybox" href="../pics/candyshop/14.jpg" data-fancybox-group="gallery"><img src="../pics/candyshop/14_s.jpg" /></a>
<a class="fancybox" href="../pics/candyshop/15.jpg" data-fancybox-group="gallery"><img src="../pics/candyshop/15_s.jpg" /></a>
<a class="fancybox" href="../pics/candyshop/16.jpg" data-fancybox-group="gallery"><img src="../pics/candyshop/16_s.jpg" /></a>
<a class="fancybox" href="../pics/candyshop/17.jpg" data-fancybox-group="gallery"><img src="../pics/candyshop/17_s.jpg" /></a>
<a class="fancybox" href="../pics/candyshop/19.jpg" data-fancybox-group="gallery"><img src="../pics/candyshop/19_s.jpg" /></a>
<a class="fancybox" href="../pics/candyshop/18.jpg" data-fancybox-group="gallery"><img src="../pics/candyshop/18_s.jpg" /></a>
<a class="fancybox" href="../pics/candyshop/20.jpg" data-fancybox-group="gallery"><img src="../pics/candyshop/20_s.jpg" /></a>
<a class="fancybox" href="../pics/candyshop/21.jpg" data-fancybox-group="gallery"><img src="../pics/candyshop/21_s.jpg" /></a>
<a class="fancybox" href="../pics/candyshop/22.jpg" data-fancybox-group="gallery"><img src="../pics/candyshop/22_s.jpg" /></a>
<a class="fancybox" href="../pics/candyshop/23.jpg" data-fancybox-group="gallery"><img src="../pics/candyshop/23_s.jpg" /></a>
<a class="fancybox" href="../pics/candyshop/24.jpg" data-fancybox-group="gallery"><img src="../pics/candyshop/24_s.jpg" /></a>
<a class="fancybox" href="../pics/candyshop/25.jpg" data-fancybox-group="gallery"><img src="../pics/candyshop/25_s.jpg" /></a>
<a class="fancybox" href="../pics/candyshop/26.jpg" data-fancybox-group="gallery"><img src="../pics/candyshop/26_s.jpg" /></a>
<a class="fancybox" href="../pics/candyshop/27.jpg" data-fancybox-group="gallery"><img src="../pics/candyshop/27_s.jpg" /></a>
<a class="fancybox" href="../pics/candyshop/28.jpg" data-fancybox-group="gallery"><img src="../pics/candyshop/28_s.jpg" /></a>
</p>
</div>
任何建议将不胜感激。谢谢！
【问题讨论】：
他们可能在服务器上，但是你检查过每个文件的权限了吗？尝试找到一个有问题的文件，转到“获取信息”，然后将权限更改为 777。如果这样可以解决问题，那么...... 也许这会有所帮助：***.com/questions/8366976/… @JezenThomas 将其更改为 7.jpg。现在，当我单击它时，图像本身会在新选项卡中打开，而不是作为弹出框。 【参考方案1】：这看起来像是一个简单的权限错误，因为当您尝试查看其中一个未加载图像 directly in a browser 时，您会收到 403 Forbidden 响应。
图片 7 有一个额外的 fancybox.ajax 类不存在于其他类，这可能导致您在对原始帖子的评论中提到的问题。
【讨论】：
以上是关于Fancybox - “无法加载请求的内容。”的主要内容，如果未能解决你的问题，请参考以下文章
FancyBox 2 android 2.3.4 - 无法滚动