JQuery Resize Image script
Jeg har lavet et script med JQuery som skal resize et billede til et MaxWidth, når siden loades, dog hvis man klikke på billedet så kan man kunne skifte imellem orginal størelse og scaled størelse.Dog er der et problem med at den nogen gang gør at billedet kun er 10x10 pixels eller noget i den stil, jeg tror det har noget at gøre med at mit script er kørt før billedet er loadet helt. men kan ikke rigtig finde ud af at fixe det.
demo: http://beta.cosplaydenmark.dk/Albums/1000/1001/
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';
}
}