Using Javascript to center images and getting some funny behavior

Question

Here is a link to the page I'm referring to:

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

I am aware that images can be centered either by absolute positioning left 50% and giving a negative margin of half the image width -- or by using margin: auto; Neither of these solutions without Java works for me, because the image is not a fixed width...

So I've created a simple javascript image viewer, consisting of a main image and thumbnails. When a thumbnail is clicked the javascript replaces the main image with the image depicted in the thumbnail in this way:

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

To center the main image, I placed it in a div called "testcenter" which has auto margins.Since the images are not all the same width, the width of #testcenter is set by a javascript that detects the width of the main image and makes that variable the width of its parent div.

The code doesn't work the first time you click a thumbnail, but after you click through all of them a couple times, or click on one twice it properly centers the image -- it's very very glitchy. I'm learning Java as I go, so for all I know this could be the dumbest way of going about centering -- any suggestions?

Here is the java I wrote up -- you'll see some lines with ".zoomy" in them, these are for a magnifying glass script:

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);
}
});

score 0 · Answer 1 · answered May 22 '13 at 18:53

0

It works after a few times, because the browser has to download the image before it knows it size. After a few clicks, the image get cached and that's why it'll start working.

You should preload the big images at the beginning or if you do it onclick, wait until the image is there before you try to center it.

$('<img/>')[0].src = 'img_url.png' // <-- this would cache/preload your img

answered May 22 '13 at 18:53

Claudio Bredfeldt

1,423
16
27

Check this http://stackoverflow.com/questions/476679/preloading-images-with-jquery – Claudio Bredfeldt May 22 '13 at 18:58
So this solution seemed to work initially when I was running everything from my computer, but now that I've put the files online it's taking forever for the script to position the large image. Is there some way to speed up the positioning? – user2121528 May 24 '13 at 05:06

score 0 · Answer 2 · answered May 22 '13 at 19:13

0

You can still use the %50 left positioning and then get image size and divide it by 2 and add margin left with .css. It's probably a good idea to add max-width to images as well so they wont be bigger than window size.

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

answered May 22 '13 at 19:13

user2391893

23
2

Designing CSS Layouts With Flexbox Is As Easy As Pie http://coding.smashingmagazine.com/2013/05/22/centering-elements-with-flexbox/ – user2391893 May 22 '13 at 19:33
That's what I did first and I ran into the same glitches, the first time you click the buttons they wouldn't readjust the margins but the second time it would work... – user2121528 May 22 '13 at 19:45

Using Javascript to center images and getting some funny behavior

2 Answers2