resize image proportionately.

[The Little Guy]

I have a script that resizes, so when you click on the image it has a resize effect. I set an interval to run every 30 milliseconds

 

The problem that i am having, is that when this runs it grows wider faster that it gets taller.

How can I get it so that the image grows proportionately?

 

Here is the script:

//mainw = image full size witht
//mainh = image full size height
//thumbh = thumbnail height
//180 = thumbnail width

function moveImage(){
var main = document.getElementById('proImgMain'); // thumbnail image
var con = document.getElementById('contentWide'); // div box
var l=false, w=false, h=false;

var center = Math.round(((con.offsetWidth - mainw) / 2) + con.offsetLeft);

var interval = Math.round((mainw * mainh) / (180 * thumbh));
var intervalh = Math.ceil((thumbh / mainh) * 10);
if(main.offsetLeft+20 < center)
	main.style.left = main.offsetLeft+5+'px';
else
	l=true;
if(main.offsetWidth < mainw)
	main.style.width = main.offsetWidth+interval+'px';
else{
	main.style.width = mainw+'px';
	w=true;
}
if(main.offsetHeight < mainh)
	main.style.height = main.offsetHeight+interval+'px';
else{
	main.style.height = mainh+'px';
	h=true;
}
if(l && w && h){
	clearInterval(timer);
}
}

[Psycho]

I started to work on this, but without a working example (i.e. the necessary HTML code) it is very difficult to understand what that code is doing. Making matters worse there are no comments and varaibles such as "l", "w", and "h" are not descriptive enough to know what they are for.

 

I think there is quite a bit of inefficiency in that code (especially since the sme variables ahve to be calculated on each iteration of the function), but can't really say without better understanding.

[The Little Guy]

Here is an example:

http://publicsize.com/test.php

Click on the main image of the girl, and you should see an effect take place. You will notice that the width grows faster than the height does as the image moves. That is all that I am trying to fix!

 

//mainw = image full size witht
//mainh = image full size height
//thumbh = thumbnail height
//180 = thumbnail width

//l = left offset true/false if it has gotten to the left (where I want it) mark it ture
//w = width true/false if it has gotten to full width size mark it ture
//h = height true/false if it has gotten to full height mark it true

//once l, w, h is equal to true, clear the interval.



var timer;
var mainw, mainh, thumbh, imghover = false;

function showProfileImage(mw,mh,th){
mainw = mw;
mainh = mh;
thumbh = th;
var thumb = document.getElementById('proImgThumb');
var main = document.getElementById('proImgMain');
var feed = document.getElementById('feed');
thumb.style.display = 'none';
with(main.style){
	display = 'block';
	position = 'absolute';
}
with(feed.style){
	marginTop = (mainh+20)+'px';
}
timer = setInterval('moveImage()',30)
}



function moveImage(){
var main = document.getElementById('proImgMain'); // thumbnail image
var con = document.getElementById('contentWide'); // div box
var l=false, w=false, h=false;

var center = Math.round(((con.offsetWidth - mainw) / 2) + con.offsetLeft);

var interval = Math.round((mainw * mainh) / (180 * thumbh));
var intervalh = Math.ceil((thumbh / mainh) * 10);
if(main.offsetLeft+20 < center)
	main.style.left = main.offsetLeft+5+'px';
else
	l=true;
if(main.offsetWidth < mainw)
	main.style.width = main.offsetWidth+interval+'px';
else{
	main.style.width = mainw+'px';
	w=true;
}
if(main.offsetHeight < mainh)
	main.style.height = main.offsetHeight+interval+'px';
else{
	main.style.height = mainh+'px';
	h=true;
}
if(l && w && h){
	clearInterval(timer);
}
}

 

 

HTML Containing the images:

<p>
<span class="profileimage" onclick="showProfileImage(537,650, 140);" id="proImgThumb"></span>
<span class="link" onclick="reSetProfileImage('90','140')"><img id="proImgMain" style="display:none;" src="http://img.publicsize.com/profileImages/original/1/3yr3iuf87fou3h4of4h28hf4h874hgh8.jpg?h=bdd36d320ba690938c561d33d9b1a503" width="90px" height="140px"></span>
</p>

 

HTML Where the image moves to:

<div class="contentWide" id="contentWide">
<div id="feed"><h3>Network Feed</h3><div class="networkFeed">
	<b><span class="link" onclick="loadBody('profile', 'id', '1')">You</span> said:</b><br>
	<p>This is about animals!</p>
	<p>From the <span class="bold">Animal</span> network <span style="color: #999999;">Monday October 18<sup>th</sup>, 2010</span></p>
</div><div class="networkFeed">
	<b><span class="link" onclick="loadBody('profile', 'id', '1')">You</span> said:</b><br>
	<p>Public Size was built with php!</p>
	<p>From the <span class="bold">PHP</span> network <span style="color: #999999;">Monday October 18<sup>th</sup>, 2010</span></p>
</div></div>
</div>

[Psycho]

The link you provided only shows random characters that appear to be hashed values or something.

[The Little Guy]

Okay, its fixed now...

[Psycho]

Well, what you have is overcomplicated and has some problems in the logic. To get it "perfect" would require a complete rewrite. But, I can get you closer to what you want with the following changes (I have added comments to the lines with changes)

    var intervalw = Math.round((mainw * mainh) / (180 * thumbh));
    var intervalh = Math.round(mainh/(mainw/intervalw)); //Define to be proportional to intervalw
    if(main.offsetLeft+20 < center)
        main.style.left = main.offsetLeft+5+'px';
    else
        l=true;
    if(main.offsetWidth < mainw)
        main.style.width = main.offsetWidth+intervalw+'px';
    else
    {
        main.style.width = mainw+'px';
        w=true;
    }
    if(main.offsetHeight < mainh)
        main.style.height = main.offsetHeight+intervalh+'px'; //Use the proportional value

 

The reason it will still be slightly off is because the intervals are rounded. So, one dimension will always complete before the other (unless the dimenaions work out to be perfectly similar). A better approach would have been to predetermine the number of steps you want the process to take. Then on each step you could cacluate the new dimensions accordingly. Then both the width and height would finish at exactly the same time.

 

To do that would require a complete rewrite of the logic.