故障中心動態插入圖像

我有一個傳送帶供用戶從中選擇縮略圖，當他們單擊它時，會在下面的DIV中顯示一個較大的圖像。在頁面加載時，DIV中有一個默認圖像，它使用css水平居中。故障中心動態插入圖像

問題是當用戶點擊另一個圖像顯示（通過jQuery），但圖像不再居中水平。因爲它是動態插入的，我不確定它正在拾取與它關聯的CSS。 jquery在$（document）.ready中執行，不知道這是否是問題。我試過使用不同的寬度來解決問題，而且沒有任何工作。圖像都有不同的寬度，所以我不能只使用一個寬度（這很可能會工作）。

任何想法？哦，是啊，如果你看到更有效的做事方式，不要害怕建議。謝謝。

<ul> 
<li><img src="images/objects/ing1.jpg /> </li> 
<li><img src="images/objects/ing2.jpg /> </li> 
<li><img src="images/objects/ing3.jpg /> </li> 
</ul> 

<div id="large_image_display"> 
     <p style="text-align: center"> 
     <a href="images/objects/img1.jpg"><img id="large_image" src="images/objects/preview/img1.jpg" alt="" /></a> 
     </p> 
    </div>

CSS：爲點擊

#large_image_display{ 
width: auto; 
min-height: 300px; 
margin-left: auto; 
margin-right: auto; 

} 

#large_image{ 
width: auto; 
margin-left: auto; 
margin-right: auto;

jQuery函數：

$('img.img_click').click(function(){ 

     var src = $(this).attr('src'); 
     var caption = $(this).attr('alt'); 

     src = src.replace("_thumb", "_preview"); 
     src = src.replace("thumbs/", "preview/"); 

     var lrg_src = src.replace("preview/", ""); 
     var lrg_src = lrg_src.replace("_preview", ""); 


     var linker = '<a class="fancier_image" href="' + lrg_src + '" >'; 


     var image_html = linker + '<img src="'; 
     var image_html_end = '" id="large_image" alt="example1" style="display: none;" /></a>'; 
     var full_img = image_html.concat(src,image_html_end); 

     $('#large_image_display').html(full_img); 

     $('#large_image').fadeIn('slow'); 









    });

來源

2011-01-11 mmundiff

嘛，只是根據你的評論，它的作品最初卻不時動態插入，我開始看你的活力版和原來的差異。

我絕對看到了差異。您的動態替換：$('#large_image_display').html(full_img);正在替換您正在用於居中內容的<p>元素。

要麼$("#large_image_display p").html(full_img)要麼加<p>到你的full_img。

來源

2011-01-11 22:29:02

一般margin:auto僅適用於固定寬度的元素。

你總是可以用jquery來定位它。

jQuery.fn.center = function() { 
    this.css("position","absolute"); 
    this.css("top", ($('#large_image_display').height() - this.height())/2+$('#large_image_display').scrollTop() + "px"); 
    this.css("left", ($('#large_image_display').width() - this.width())/2+$('#large_image_display').scrollLeft() + "px"); 
    return this; 
}

然後：

$('#large_image').center().fadeIn('slow')

來源

2011-01-11 22:22:40

是的，我知道margin auto並且必須知道寬度。我嘗試了你的解決方案，但它綁在窗戶上。我需要在#large_image_display div的中心。 – mmundiff 2011-01-11 22:30:14

@ mmundiff - 我更新了從窗口選擇器到``＃large_image_display'`試試看。 – 2011-01-11 22:35:14

故障中心動態插入圖像

回答

相關問題