Wednesday, February 25, 2009

Create thumbnail image using jquery or javascript

If you want to maintain the proportion of the image when creating thumbnail for your website, please use this tested script

<script src="js/jquery-1.2.6.min.js"
type="text/javascript"></script>
<style
type="text/css">
.thumbnail
{
vertical-align:middle;
}
</style>
<script type="text/javascript" >
$(document).ready(
function AutoImageResizing(src, fixedSize) {
var
width = src.width;
var height = src.height;
var ratio = width / height;
if (width > fixedSize) {
src.width = fixedSize

}
if
(height > fixedSize) {
var sizedwidth = fixedSize / ratio;
var
sizedheight = fixedSize / ratio;
if (height > width) {
if (height
> sizedwidth) {
src.height = fixedSize
}
if (sizedwidth
> fixedSize) {
src.width = src.width * ratio;
} else {
src.height = src.height * ratio;
}
} else {
src.width =
fixedSize
}
}
}
);
</script>
HTML


<img class="thumbnail"
src="http://latimesblogs.latimes.com/photos/uncategorized/2008/10/05/love.jpg"
onload="AutoImageResizing(this,100)" />
<img class="thumbnail"
src="http://images.google.com.my/intl/en_ALL/images/images_hp.gif"
onload="AutoImageResizing(this,100)"/>



Do you find this useful, please let me know! :)

6 comments:

Anonymous said...

not working well after I copied, pasted and re-edited(some bad written part in js)

could you show me any working version webpage with that js plug-in?

Thank you.

Anonymous said...

It works for me just fine. Thanks for the codes.

Anonymous said...

crazy idea i know but how do u think credit cruch affected porn?

Anonymous said...

is porn the only winner during credit crunch?

Yahoo store development said...

couldn't get it to work... can you provide the link to a working example? thanks!

Anonymous said...

Got it working
here is the new code
http://pastebin.com/GYSAuuKa