drisate Posted June 17, 2010 Share Posted June 17, 2010 Hey guys i need to check the image size of an image and if it's smaller then 300px large then load the original image ... But i have no idea how to do that in javascript lol this is how i would do it in PHP list($width, $height, $type, $attr) = getimagesize('media/original/'.$list[image1]); if ($width<'300'){ [...] This is my Javascript code if (image_1!== '') { html +='<img src="media/medbig/' + image_1 + '" width="300" style="border: 1px solid black;" id="img_preview_' + id + '"><br><br>' } else if (image_2!== '') { html +='<img src="media/medbig/' + image_2 + '" width="300" style="border: 1px solid black;" id="img_preview_' + id + '"><br><br>' } else if (image_3!== '') { html +='<img src="media/medbig/' + image_3 + '" width="300" style="border: 1px solid black;" id="img_preview_' + id + '"><br><br>' } else if (image_4!== '') { html +='<img src="media/medbig/' + image_4 + '" width="300" style="border: 1px solid black;" id="img_preview_' + id + '"><br><br>' } else if (image_5!== '') { html +='<img src="media/medbig/' + image_5 + '" width="300" style="border: 1px solid black;" id="img_preview_' + id + '"><br><br>' } if media/original/' + image_5 + ' is smaller then 300px large use him in stead of media/medbig/' + image_5 + ' Quote Link to comment Share on other sites More sharing options...
lemmin Posted June 17, 2010 Share Posted June 17, 2010 The offsetHeight and offsetWidth properties will get you the dimensions of the image. Quote Link to comment Share on other sites More sharing options...
drisate Posted June 17, 2010 Author Share Posted June 17, 2010 Thx ... But i have no idea how to programme that. Any help would be welcome Quote Link to comment Share on other sites More sharing options...
drisate Posted June 18, 2010 Author Share Posted June 18, 2010 This is what i tryed so fare but it's not working imgFile.src = 'media/original/' + image_1; if (imgFile.width < 300) { html +='<img src="media/original/' + image_1 + '" style="border: 1px solid black;" id="img_preview_' + id + '"><br><br>' }else{ html +='<img src="media/medbig/' + image_1 + '" width="300" style="border: 1px solid black;" id="img_preview_' + id + '"><br><br>' } Quote Link to comment Share on other sites More sharing options...
lemmin Posted June 21, 2010 Share Posted June 21, 2010 <html> <head> <script type="text/javascript"> function imgSize(img) { alert(img.offsetHeight + "," + img.offsetWidth); } </script> </head> <body> <img src="http://www.google.com/logos/logo.gif" onclick="imgSize(this)"/> </body> </html> Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.