Image Resize
Image Resize
I have made a script that can resize a image to the "Max Width" on load.
And then when you click the image you can switch between the orginal size and scaled size.
But ther are a problem with it sometime makes the image 10 px x 10 px. when the image is 800x600 and the max width is 700.
I think this have something to do with it getting the org image size before the image has loadet complety.
But i have tryed all day and just can't get it to work.
demo:
http://beta.cosplaydenmark.dk/Albums/1000/1001/
here is the code.
-
var imgState = 'large';
var MaxWidth = 700;
var orgWidth;
var orgHeight;
var scaleWidth;
var scaleHeight;
$(document).ready(function(){
orgWidth = $("#showimage").width();
orgHeight = $("#showimage").height();
if(orgWidth > MaxWidth)
{
scaleWidth = MaxWidth;
scaleHeight = (MaxWidth/orgWidth)*orgHeight;
}
else
{
scaleWidth = orgWidth;
scaleHeight = orgHeight;
}
Resize('fast');
$("#showimage").click(function(){
Resize('slow');
});
});
function Resize(type)
{
if(imgState == 'small')
{
$("#showimage").animate({ height: orgHeight, width: orgWidth }, type);
$(".resizeDiv").hide(type);
imgState = 'large';
}
else
{
$("#showimage").animate({ height: scaleHeight, width: scaleWidth }, type);
$(".resizeDiv").show(type);
imgState = 'small';
}
}