我正在尝试让Fancybox打开一个特定维度的HTML文件。
每当我在任何浏览器中测试它时,HTML出现的框都很清晰,并且不够大,无法适应它。
我不确定如何解决它,任何想法?
HTML:
<!DOCTYPE html><head>
<link href="../CSS/css.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
<link rel="stylesheet" href="/fancybox/jquery.fancybox-1.3.4.css" type="text/css" media="screen" />
<script type="text/javascript">
window.onload = function() {
/* This is basic - uses default settings */
$("a#single_image").fancybox();
/* Using custom settings */
$("a#inline").fancybox({
'hideOnContentClick': true
});
$("a.grouped_elements").fancybox({
'transitionIn' : 'fade',
'transitionOut' : 'fade',
'speedIn' : 600,
'speedOut' : 200,
'overlayShow' : false,
'titlePosition' : 'inside'
});
/* Apply fancybox to multiple items */
$("a.iframe_shows").fancybox({
'width' : 840,
'height' : 440,
'autoScale' : false,
'transitionIn' : 'fade',
'transitionOut' : 'fade',
'overlayShow' : false,
'type' : 'iframe',
'scrolling' : 'no',
});
};
</script>
</head>
<title>ATLITW</title>
<body>
<div id="row1">
<div id="link1">
<div id="link">
<img src="../Images/3.jpg" width="388" height="238">
<div class="shows"><a class="iframe_shows" href="Shows.html"></a></div></div>
</div></div>
</div>
</body>
</html>
CSS:
@charset "UTF-8";
/* CSS Document */
body{
background-image:url(../Images/bg.jpg);
border:0 none;
font-family:arial, helvetica;
font-size:12px;
font-style:normal;
font-weight:normal;
color:#000;
margin:0;}
/* Core */
#row1 {
width:900px;
height:288px;}
#link1 {
width:388px;
height:238px;
float:left;
margin-left:55px;
margin-top:50px;}
/* LINKS */
#link {position:relative;
overflow:hidden;
height:238px;}
#link img{
opacity:1;
-webkit-transition: opacity;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
-moz-transition: opacity;
-moz-transition-timing-function: ease-out;
-moz-transition-duration: 500ms;
transition: opacity;
transition-timing-function: ease-out;
transition-duration: 500ms;
}
.shows a
{
display:block;
width:388px;
height:238px;
border:none;
padding-left:10px;
padding-top:10px;
background-image:url(../Images/3.jpg)
}
.shows{
width:388px;
height:238px;
text-align:left;
}
#link .shows{
position: absolute;
top: 0px;
left: 0px;
opacity: 0;
-webkit-transition: opacity;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
-moz-transition: opacity;
-moz-transition-timing-function: ease-out;
-moz-transition-duration: 500ms;
transition: opacity;
transition-timing-function: ease-out;
transition-duration: 500ms;
}
#link .shows:hover{
opacity: 1.0;
-webkit-transition: opacity;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
-moz-transition: opacity;
-moz-transition-timing-function: ease-out;
-moz-transition-duration: 500ms;
transition: opacity;
transition-timing-function: ease-out;
transition-duration: 500ms;
}