Использования Javascript для центрирования изображений и получить некоторое смешное поведение

Question

Вот ссылка на страницу, я имею в виду:

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

Я знаю, что изображения могут быть сосредоточены либо абсолютным позиционированием осталось 50% и дает отрицательный запас половины ширины изображения - или с использованием margin: auto; Ни одно из этих решений без Java не работает для меня, потому что изображение не является фиксированной шириной ...

Итак, я создал простой просмотрщик изображений javascript, состоящий из основного изображения и миниатюр. Когда эскиз щелкнул Javascript заменяет основное изображение с изображением, изображенным на эскизе таким образом:

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

Для центрирования основного изображения, я поместил его в DIV под названием «TestCenter», которая имеет авто поля. Поскольку изображения не имеют одинаковой ширины, ширина #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); 
} 
}); 

Answer 1

Он работает после того, как несколько раз, потому что б rower должен загрузить изображение, прежде чем он его знает. Через несколько кликов изображение будет кэшировано, и именно поэтому оно начнет работать.

Вы должны предварительно загрузить большие изображения в начале или если вы сделаете это onclick, дождитесь, пока изображение не появится, прежде чем пытаться центрировать его.

Answer 2

Вы по-прежнему можете использовать левое позиционирование% 50, а затем получить размер изображения и разделить его на 2 и добавить поле, оставшееся на .css. Вероятно, неплохо добавить max-width к изображениям, чтобы они не были больше размера окна.

$('#imagediv').css('marginLeft',-(imagewith/2));