1

I'm trying to have Fancybox open a HTML file, of particular dimensions.

Whenever I test it in any browser, The box that the HTML comes up in is clear, and not big enough to fit it.

I'm not sure how to fix it, any ideas?

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;
}
user229044
  • 232,980
  • 40
  • 330
  • 338
Jordan Cagney
  • 787
  • 1
  • 5
  • 8
  • Your questions should be self-contained. Please don't host the most important parts of your question on some 3rd party website. – user229044 Jun 25 '13 at 01:17
  • I do apologize, tried for ages to post the code here but it kept coming up with errors. – Jordan Cagney Jun 25 '13 at 01:18
  • @JordanCagney : could you post your html too? – JFK Jun 25 '13 at 16:50
  • @JFK, All the HTML is there. – Jordan Cagney Jun 26 '13 at 05:24
  • @JordanCagney : you have some issues and this is why is advisable to validate you code (http://validator.w3.org/) so you can fix them : 1). the `` opening tag is missing. 2). the `` tag is between the `` closing tag and the `` opening tag (should be contained inside the `` tag). 3). You have an extra `` closing tag. Most editors will highlight those errors when a tag is not closed or missing, otherwise the validator will make them obvious. I bet if you correct them fancybox will work, at least, most importantly, the number "1". – JFK Jun 26 '13 at 06:53

0 Answers0