Add margins to images on load?

Question

I'm trying to figure out how to dynamically insert a margin into "mainImage". What I'm trying to do is vertically center the image, which has dynamic height and width (and dynamic client viewports). I can't figure out how to add the margins into the images as they're being loaded from javascript...

I have the following HTML:

<div id="content">
    <img id="left" onclick="prevImage('images/52/image_','mainImage',52)" src="icons/arrow_left.png" />
    <img id="right" onclick="nextImage('images/52/image_','mainImage',52)" src="icons/arrow_right.png"/>
    <img id="mainImage" src="images/52/image_0.jpg" onload="addMargins()" />
</div>

with the following CSS:

div#content{
    position: absolute;
    margin-left: 20%;
    margin-right: 5%;
    width: 75%;
    height: 95%;
    text-align: center;
}

div#content img#left{
    position: absolute;
    left: 0;
    top: 50%;
}

div#content img#right{
    position: absolute;
    right: 0;
    top: 50%;
}

div#content img#mainImage{
    max-height: 100%;
    max-width: 95%;
}

and the javascript:

var key = 1;

function nextImage(thePath, id, max)
{
    if(key == max)
    {
        key = 1;
    }else{
        key++;
    }
    var image = thePath + key + ".jpg";
    document.getElementById(id).src= image;
};

function prevImage(thePath, id, max)
{
    if(key == 1)
    {
        key = max;
    }else{
        key--;
    }
    var image = thePath + key + ".jpg";
    document.getElementById(id).src= image;
};

So my idea was to do something in javascript that basically says:

"var viewport= viewport.height;
var mainImage= mainImage.height;
set marginTop to (viewport-mainImage)/2;
set marginBottom to (viewport-mainImage/2;"

and do that for each image as it loads via the "next/prev" buttons.

possible duplicate http://stackoverflow.com/questions/11284637/center-an-image-inside-a-div — Ashwin Singh, Jul 03 '12 at 05:56
no, the image size is unknown (i would like the maximum possible), and because it's dynamic (max-width: 100% etc) which changes based on the browser/viewport/device etc — Eric Wolf, Jul 03 '12 at 05:59
that user wants the image scaled down, whereas i do not. ie if the image can have a height of 100% of the div, that would be preferable. also, not only is the size of the image not known, the size of the div is not known either. — Eric Wolf, Jul 03 '12 at 06:01

score 0 · Answer 1 · answered Jul 03 '12 at 06:00

I wouldn't say this is the best way to do this. You probably want to look at using 'em's in your css to set the margins rather than doing it inline. The em's will ensure that the margins are relative to the size of the containing element.

However, if you want to do it this way, then you are on the right track. You will need to get a reference to the image and then set the marginTop property of the style.

 var elem = document.getElementById(id); //reference to image
 elem.style.marginTop = (viewport-mainImage)/2;
 elem.style.marginBottom = (viewport-mainImage)/2;

I'm not 100% sure that your image will already have a height, so let me know if this works. If not, I'll check it out when I have a moment. Happy coding.

If it is getting the height, it's not applying it to the image before the page(image?) loads. `var elem = document.getElementById(id); //reference to image var viewport = document.documentElement.clientHeight; elem.style.marginTop = (viewport-elem.height)/2; elem.style.marginBottom = (viewport-elem.height)/2;` — Eric Wolf, Jul 03 '12 at 06:08

Add margins to images on load?

1 Answers1