jQuery Fancybox显示很小 [英] jQuery Fancybox showing up tiny
问题描述
我完全感到困惑.我将其简化为最简单的情况，并通过 http://www.ericaspindler.com/private/
代码已剥离所有其他JS和CSS，以查找干扰.
整个文档:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Erica Spindler | Author</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script type="text/javascript" src="../js/fancybox_new/jquery.fancybox-1.3.1.js"></script>
<link rel="stylesheet" type="text/css" href="../js/fancybox_new/jquery.fancybox-1.3.1.css" media="screen" />
<script type="text/javascript">
$(document).ready(function(){
$("#infolink").fancybox({});
$("#infolink").click();
});
</script>
</head>
<body>
<div id="fancy" style="display:none;">
<div style="width:500px; height:500px">
<img src="../g/video_Faulkner_Society_300.jpg" width="300" height="243" alt="" />
</div></div>
<a id="infolink" href="#fancy" class="infolink" style="display:none"></a>
</body>
</html>
为弄清楚，#fancy div的原始HTML内容被简化为该图像.
还删除了我正在初始化的参数:
$(".infolink").fancybox({
'scrolling' : 'no',
'titleShow' : false,
'overlayOpacity' : '0.7'
});
有人可以告诉我我的错误吗?
display: none应该在要用作框的那个的 parent div上设置.请参阅文档中的#4(内联内容).
因此将id="fancy"移到子div上，如下所示:
<div style="display:none;">
<div style="width:500px; height:500px" id="fancy">
此处 .
I am totally baffled. I have reduced this to the simplest possible case and run it through W3c's validator and I still get this tiny Fancybox window. I've used Fancybox many many times. Looks like this:
Page is here: http://www.ericaspindler.com/private/
Code has had all other JS and CSS stripped out in an effort to locate interference.
The entire document:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Erica Spindler | Author</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script type="text/javascript" src="../js/fancybox_new/jquery.fancybox-1.3.1.js"></script>
<link rel="stylesheet" type="text/css" href="../js/fancybox_new/jquery.fancybox-1.3.1.css" media="screen" />
<script type="text/javascript">
$(document).ready(function(){
$("#infolink").fancybox({});
$("#infolink").click();
});
</script>
</head>
<body>
<div id="fancy" style="display:none;">
<div style="width:500px; height:500px">
<img src="../g/video_Faulkner_Society_300.jpg" width="300" height="243" alt="" />
</div></div>
<a id="infolink" href="#fancy" class="infolink" style="display:none"></a>
</body>
</html>
The original HTML content of the #fancy div was reduced to this one image in an effort to clarify.
Also removed the parameters I was initializing with:
$(".infolink").fancybox({
'scrolling' : 'no',
'titleShow' : false,
'overlayOpacity' : '0.7'
});
Can anyone tell me my error?
The display: none should be set on the parent div of the one you want to act as a box. See #4 (inline content) in the documentation.
So move the id="fancy" to the child div like this:
<div style="display:none;">
<div style="width:500px; height:500px" id="fancy">
HERE is the example.
这篇关于jQuery Fancybox显示很小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
