1

我试图让 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;
}
4

0 回答 0