2011-12-14 76 views
0

我完全不知所措。我已經減少了這個最簡單的情況,並運行它通過W3c's validator,我仍然得到這個小Fancybox窗口。我用過很多次Fancybox。看起來是這樣的:jQuery Fancybox顯示出微小的

enter image description here

頁是在這裏: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' 
    }); 

誰能告訴我,我的錯誤?

回答

5

display: none應設置 div你想作爲一個盒子。請參閱#4 (inline content) in the documentation

所以移動id="fancy"孩子DIV這樣的:

<div style="display:none;"> 
    <div style="width:500px; height:500px" id="fancy"> 

HERE就是例子。

+0

對於正在運行的jsbin和指向文檔的鏈接,爲+1。 – JesseBuesking 2011-12-14 17:45:45

-1

我不知道這是否會幫助,但你的jQuery寫得不好。

$(document).ready(function(){  
    $("#infolink").fancybox(); 
}); 

讓我知道這是否有幫助,如果沒有,我會繼續研究它。