How to make a thumbnail using javascript?

[FXDesigns]

Now i don't have a clue about javascript lol.. But i want to know is it possible to make a thumbnail by putting in the full size image, instead of having 2 images (thumbnail AND full size)? If so, could someone please post a code or tutorial on how to do it?

Thanks.

[FXDesigns]

Anyone?!

[Rakuli]

The thumbnail will look terrible if it's resized by javascript/html... it will be all squishy.

To actually do it, you would need to create the images and then load them into the page...

Code: Select all

<script type="text/javascript">
var thumbWidth = 100; // Width for thumbnails

var image1 = new Image();

image1.src = 'this.jpg';

// write the larger image to the page

document.write('<img src="' + image1.src + '" width="' + image1.width + '" height="' + image1.height + '" />');

// Write the thumb

document.write('<img src="' + image1.src + '" width="' + (Math.round((thumbWidth/image1.width) * image1.width)) + '" height="' + (Math.round((thumbWidth/image1.width) * image1.height)) + '" />');


</script>

That should do it ^

[FXDesigns]

I mean like cropping them in a certain place?

Anyone?

[Jack Franklin]

Don't think so. That's beginning to get rather complex. I would suggest a PHP approach, but I'm not sure. Some links I found:
http://superaff.com/archives/2006/03...resize-script/
http://blazonry.com/scripting/upload-size.php
http://www.hotscripts.com/PHP/Script...ion/index.html
http://www.google.com/search?hl=en&r...esizer&spell=1

[Rakuli]

So what you're talking about isn't thumbnails at all then?

You want to clip a certain amount of the image away? If this is the case you can do it with CSS

[FXDesigns]

Originally Posted by Rakuli

So what you're talking about isn't thumbnails at all then?

You want to clip a certain amount of the image away? If this is the case you can do it with CSS

Yes, but in return they will come out as thumbnails.. you know what i mean? lol

Would you know how to do that in css?

Would you just put an image in a div and make the div size the size i want it to be clipped?

[Rakuli]

Use clipping like this

HTML: Select all

<div style="clip: rect(10px 10px 10px 10px);">
<img src="someimage.jpg" width="100" height="100" />
</div>

That will clip 10px off top right bottom and left of the contents of the div.