0

这是我所指的页面的链接：

http://ellen-paul.com/interiorpage3_new2.html

我知道图像可以通过绝对定位左 50% 并给出图像宽度一半的负边距来居中 - 或使用 margin: auto; 这些没有Java的解决方案都不适合我，因为图像不是固定宽度......

所以我创建了一个简单的 javascript 图像查看器，由主图像和缩略图组成。单击缩略图时，javascript 会以这种方式将主图像替换为缩略图中描绘的图像：

 $("#largeimage").attr('src','images/interiorcontents3/1.JPG');

为了使主图像居中，我将它放在一个名为“testcenter”的 div 中，该 div 具有自动边距。由于图像的宽度不完全相同，#testcenter 的宽度由检测主图像宽度的 javascript 设置，并且使该变量成为其父 div 的宽度。

代码在您第一次单击缩略图时不起作用，但是在您单击所有缩略图几次或单击两次后，它会正确居中图像 - 这是非常非常有问题的。我正在学习Java，所以据我所知，这可能是最愚蠢的居中方式——有什么建议吗？

这是我写的java——你会看到一些带有“.zoomy”的行，这些是放大镜脚本：

HTML

<div id="imagegallery">

    <div id="testcenter">


<span id="hoverpad">
<span class="moreimages">more images</span>
<div id="thumbscolbg"></div>
<div id="thumbnailscol">

    <img src="images/interiorcontents3/3_1.jpg" class="verticalthumbs" id="imgbutton1">
    <img src="images/interiorcontents3/3_2.jpg" class="verticalthumbs" id="imgbutton2">
    <img src="images/interiorcontents3/3_3.jpg" class="verticalthumbs" id="imgbutton3">
    <img src="images/interiorcontents3/3_4.jpg" class="verticalthumbs" id="imgbutton4">
    <br /><br />

</div>
</span>


    <a href="images/interiorcontents3/2.JPG" class="zoom">
    <img src="images/interiorcontents3/2.JPG" id="largeimage">
    </a>

JAVASCRIPT

$("#imgbutton1").click(function () {
        $("#largeimage").attr('src','images/interiorcontents3/1.JPG');
        $("#imagegallery a").attr('href','images/interiorcontents3/1.JPG');
        var imagewidth = $("#largeimage").width();
$('#testcenter').width(imagewidth);
        $('.zoom').zoomy({border:'1px solid #fff', zoomSize: 300, glare:     false,
                    zoomStart: function(){     $("#hoverpad").css({'display' : 'none'}); },
                    zoomStop: function(){     $("#hoverpad").css({'display' : 'block'}); }  });

});

$("#imgbutton2").click(function () {
        $("#largeimage").attr('src','images/interiorcontents3/2.JPG');
        $("#imagegallery a").attr('href','images/interiorcontents3/2.JPG');
        var imagewidth = $("#largeimage").width();
$('#testcenter').width(imagewidth);
        $('.zoom').zoomy({border:'1px solid #fff', zoomSize: 300, glare: false,
                    zoomStart: function(){     $("#hoverpad").css({'display' : 'none'}); },
                    zoomStop: function(){     $("#hoverpad").css({'display' : 'block'}); }  });
});

$("#imgbutton3").click(function () {
        $("#largeimage").attr('src','images/interiorcontents3/3.JPG');
        $("#imagegallery a").attr('href','images/interiorcontents3/3.JPG');
        var imagewidth = $("#largeimage").width();
$('#testcenter').width(imagewidth);
        $('.zoom').zoomy({border:'1px solid #fff', zoomSize: 300, glare: false,
                    zoomStart: function(){     $("#hoverpad").css({'display' : 'none'}); },
                    zoomStop: function(){     $("#hoverpad").css({'display' : 'block'}); }  });
});

$("#imgbutton4").click(function () {
        $("#largeimage").attr('src','images/interiorcontents3/4.JPG');
        $("#imagegallery a").attr('href','images/interiorcontents3/4.JPG');
        var imagewidth = $("#largeimage").width();
$('#testcenter').width(imagewidth);
        $('.zoom').zoomy({border:'1px solid #fff', zoomSize: 300, glare: false,
                    zoomStart: function(){     $("#hoverpad").css({'display' : 'none'}); },
                    zoomStop: function(){     $("#hoverpad").css({'display' : 'block'}); }  });
});


$(window).load(function(){
var imagewidth = $("#largeimage").width();
var textwidth = $(".projecttext").width();
$('#testcenter').width(imagewidth);

if ($('#largeimage').width() < 500) {
    $('#bottomborder').width(textwidth);
    $('#right').right(30);
} else {
$('#bottomborder').width(imagewidth);
$('.projecttext').width(imagewidth);
}
});
4

2 回答 2

0

您仍然可以使用 %50 左侧定位，然后获取图像大小并将其除以 2 并使用 .css 添加左侧边距。为图像添加最大宽度可能是个好主意，这样它们就不会大于窗口大小。

$('#imagediv').css('marginLeft',-( imagewith / 2));
于 2013-05-22T19:13:38.423 回答
0

几次后它就可以工作了，因为浏览器必须在知道它的大小之前下载图像。单击几下后，图像会被缓存，这就是它开始工作的原因。

您应该在开始时预加载大图像，或者如果您在单击时执行此操作，请等到图像存在后再尝试将其居中。

$('<img/>')[0].src = 'img_url.png' // <-- this would cache/preload your img
于 2013-05-22T18:53:40.193 回答