我有一个旋转木马供用户选择缩略图,当他们单击它时,下面的 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');
});
最佳答案
好吧,根据您的评论,它最初有效但在动态插入时无效,我将开始研究您的动态版本与原始版本之间的差异。
我确实看到了不同。您的动态替换:$('#large_image_display').html(full_img);
正在替换 <p>
您用来使内容居中的元素。
或者$("#large_image_display p").html(full_img)
或添加 <p>
给你的full_img
.
关于jquery - 无法居中动态插入的图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4663269/