How to make a thumbnail using javascript?

FXDesigns · #1 Jan 17th, 2008, 19:44

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 · #2 Jan 18th, 2008, 14:33

Anyone?!

Rakuli · #3 Jan 18th, 2008, 20:15

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 · #4 Jan 19th, 2008, 21:03

I mean like cropping them in a certain place?

Anyone?

Jack Franklin · #5 Jan 19th, 2008, 21:07

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 · #6 Jan 20th, 2008, 09:50

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 · #7 Jan 20th, 2008, 15:18

Quote:

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 · #8 Jan 21st, 2008, 01:58

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.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
A new simple way to make a image slider- Javascript Code	o0DarkEvil0o	JavaScript Forum	1	May 20th, 2008 01:37
HELP - IE7 Thumbnail Images on a tab	ActionPart	Web Page Design	2	Jul 15th, 2007 13:00
thumbnail and text next to each other	konnor5092	Web Page Design	15	Jul 2nd, 2007 11:51
Scrolling thumbnail	Dan Oliver	Flash & Multimedia Forum	1	Jun 6th, 2007 16:22
How does one make thumbnail images?	Picard	Website Planning	3	Dec 29th, 2006 13:34

		Webforumz.com > Main Forums > Program Your Website > JavaScript Forum
How to make a thumbnail using javascript?