2009-11-07 28 views
0

我似乎无法让我的图像在使用thickbox时弹出实际大小。有人知道怎么修这个东西吗?无法使用thickbox jquery获得图像的全尺寸

<html> 
<head> 
    <link rel="stylesheet" type="text/css" href="style.css"> 
    <title>WildFire</title> 
    <script type="text/javascript" src="js/jquery.js"></script> 
    <script type="text/javascript" src="js/thickbox.js"></script> 
</head> 
<body> 
    <div id="wrapper"> 
     <div id="body"> 
      <img src="images/tempbar.png"> 
      <div id="text"> 
       <img class="logo" src="images/logo.png"> 
       <ul class="info"> 
        <li>Hours: </li> 
        <p> 
        <li> Lunch 11am - 3pm </li> 
        <li> Dinner 5pm - 10pm </li> 
        <p> 
        <li>Phone: </li> 
        <p> 
        <li>(607) 277-9143</li> 
        <p> 
        <li>Address: </li> 
        <p> 
        <li> 106 S Cayuga St </li> 
        <li>Ithaca, NY 14850 </li> 
       </ul> 
       <p class="linkouts"> 
        <a class="thickbox" href="images/lunch.png"> 
         <img src="images/lunchlink.png"> 
        </a> 
       <p> 
        <img src="images/dinnerlink.png"> 
      </div> 
     </div> 
     <div id="footer"> 
      For Lounge Events Find Us On 
      <a href="http://www.facebook.com/pages/Ithaca-NY/WildFire-Lounge/144229581885?ref=ts" target="_blank"> 
       <img class ="fb" src="images/loungefb.png"> 
      </a> 
      Come Visit 
      <a href="http://www.madelines-restaurant.com/" target="_blank"> 
       <img class="mad" src="images/madelineslogo.png"> 
      </a> 
      And Our Friend 
      <a href="http://www.stateofithaca.com/" target="_blank"> 
       <img class="state" src="images/stlogo.png" 
      </a> 
     </div> 
    </div> 
</body> 
</html> 

----------------------------css------------------- 

#wrapper { 
    background: #7E0000; 
    height:660px; 
    width:100%; 
    padding:25px 0px 0px 0px; 
} 

#body { 
    background: #000000; 
    height:533px; 
    width:800px; 
    margin: 0px 0px 0px 18%; 
} 

#text{ 
    color:#ffffff; 
    height:400px; 
    width:400px; 
    float:right; 
    } 

ul.info { 
    margin-top:125px; 
    list-style-type: none; 
} 

img.logo { 
    float:right; 
    margin:0px 30px 0px 0px; 
} 

.linkouts { 
    color: #ffffff; 
} 

#footer { 
    padding:55px 0px 0px 100px; 
    font-weight: bold; 
    color: #ffffff; 
} 

.fb { 
    margin-left:20px; 
    margin-right:20px; 
    border: none; 
} 

.mad { 
    margin-left:20px; 
    margin-right:20px; 
    border: none; 
} 

.state { 
    margin-left:20px; 
    border: none; 
} 

/* ----- */ 
/* ----- >>> global settings needed for thickbox <<< ----- */ 
/* ----- */ 
*{padding: 0; margin: 0;} 
/* -----*/ 
/* ----->>> thickbox specific link and font settings <<<-----*/ 
/* -----*/ 
#TB_window { 
    font: 12px Arial, Helvetica, sans-serif; 
    color: #333333; 
} 
#TB_secondLine { 
    font: 10px Arial, Helvetica, sans-serif; 
    color:#666666; 
} 
#TB_window a:link {color: #666666;} 
#TB_window a:visited {color: #666666;} 
#TB_window a:hover {color: #000;} 
#TB_window a:active {color: #666666;} 
#TB_window a:focus{color: #666666;} 
/* -----*/ 
/* ----->>> thickbox settings <<<-----*/ 
/* -----*/ 
#TB_overlay { 
    position: fixed; 
    z-index:100; 
    top: 0px; 
    left: 0px; 
    height:100%; 
    width:100%; 
} 
.TB_overlayMacFFBGHack {background: url(macFFBgHack.png) repeat;} 
.TB_overlayBG { 
    background-color:#000; 
    filter:alpha(opacity=75); 
    -moz-opacity: 0.75; 
    opacity: 0.75; 
} 
* html #TB_overlay { /* ie6 hack */ 
    position: absolute; 
    height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px'); 
} 
#TB_window { 
    position: fixed; 
    background: #ffffff; 
    z-index: 102; 
    color:#000000; 
    display:none; 
    border: 4px solid #525252; 
    text-align:left; 
    top:50%; 
    left:50%; 
} 
* html #TB_window { /* ie6 hack */ 
position: absolute; 
margin-top: expression(0 - parseInt(this.offsetHeight/2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px'); 
} 
#TB_window img#TB_Image { 

    display:block; 
    margin: 15px 0 0 15px; 
    border-right: 1px solid #ccc; 
    border-bottom: 1px solid #ccc; 
    border-top: 1px solid #666; 
    border-left: 1px solid #666; 
} 
#TB_caption{ 
    height:25px; 
    padding:7px 30px 10px 25px; 
    float:left; 
} 
#TB_closeWindow{ 
    height:25px; 
    padding:11px 25px 10px 0; 
    float:right; 
} 
#TB_closeAjaxWindow{ 
    padding:7px 10px 5px 0; 
    margin-bottom:1px; 
    text-align:right; 
    float:right; 
} 
#TB_ajaxWindowTitle{ 
    float:left; 
    padding:7px 0 5px 10px; 
    margin-bottom:1px; 
} 
#TB_title{ 
    background-color:#e8e8e8; 
    height:27px; 
} 
#TB_ajaxContent{ 
    clear:both; 
    padding:2px 15px 15px 15px; 
    overflow:auto; 
    text-align:left; 
    line-height:1.4em; 
} 
#TB_ajaxContent.TB_modal{ 
    padding:15px; 
} 
#TB_ajaxContent p{ 
    padding:5px 0px 5px 0px; 
} 
#TB_load{ 
    position: fixed; 
    display:none; 
    height:13px; 
    width:208px; 
    z-index:103; 
    top: 50%; 
    left: 50%; 
    margin: -6px 0 0 -104px; /* -height/2 0 0 -width/2 */ 
} 
* html #TB_load { /* ie6 hack */ 
position: absolute; 
margin-top: expression(0 - parseInt(this.offsetHeight/2) + (TBWindowMargin = document.documentElement && document.documentElement.scrollTop || document.body.scrollTop) + 'px'); 
} 
#TB_HideSelect{ 
    z-index:99; 
    position:fixed; 
    top: 0; 
    left: 0; 
    background-color:#fff; 
    border:none; 
    filter:alpha(opacity=0); 
    -moz-opacity: 0; 
    opacity: 0; 
    height:100%; 
    width:100%; 
} 
* html #TB_HideSelect { /* ie6 hack */ 
    position: absolute; 
    height: expression(document.body.scrollHeight > document.body.offsetHeight ? document.body.scrollHeight : document.body.offsetHeight + 'px'); 
} 
#TB_iframeContent{ 
    clear:both; 
    border:none; 
    margin-bottom:-1px; 
    margin-top:1px; 
    _margin-bottom:1px; 
} 
+0

您可能没有选择,只是指出:Thickbox已被弃用且不再受支持。您可以在页面顶部看到通知:http://jquery.com/demo/thickbox/ – 2009-11-07 03:56:16

+0

谢谢,我切换到了colorbox,事情似乎更顺利。 – Davey 2009-11-09 16:43:56

回答

0

检查thickbox的js文件。它具有高度和宽度的默认值,因此如果您没有在url中明确指定它们(通过参数传递thickbox的方式),则会根据默认值显示窗口。