Help with thumbnails Options

[Wayne]

Hi, I need help with resizing thumbnails please, either with CSS or Javascript.

I currently have 2 sizes for thumbnails defined with CSS (one for landscape and one for portrait):

img.smalltall {height:100px;width:75px;border-width:0px;margin:2px}
img.smallwide {height:75px;width:100px;border-width:0px;margin:2px}

The image filenames are generated using Javascript, and the code I am using to display the images is:

<td><div align="center"><img src="#" id="pic1" name="pic1" class="smalltall" onClick="document.all.main.src = image1.src;"></div></td>
<td><div align="center"><img src="#" id="pic2" name="pic2" class="smalltall" onClick="document.all.main.src = image2.src;"></div></td>
<td><div align="center"><img src="#" id="pic3" name="pic3" class="smalltall" onClick="document.all.main.src = image3.src;"></div></td>
<td><div align="center"><img src="#" id="pic4" name="pic4" class="smalltall" onClick="document.all.main.src = image4.src;"></div></td>

At the moment, if a thumbnail image is in landscape, I have to manually edit the above code to read: class="smallwide"

What I would like to do, is get all the thumbnails to automatically display at 25% of the size of the original external file. I have attempted this with CSS, but couldn't get it to work, and was thinking maybe Javascript is the answer?

Any help greatly appreciated!

Wayne

[Brian Chandler]

What I would like to do, is get all the thumbnails to automatically display at 25% of the size of the original external file.

I think this is what is called "dumbnails" - using a full-size image squashed down in the browser. It is better to send real thumbnails from the server - images whose native size is the thumbnail size.

I don't understand what you mean by "generating" stuff in javascript if you can edit it manually afterwards. It doesn't look as though there is any (good) reason to use javascript here.

[Wayne]

Hi Brian, thanks for your reply. The code is to be used as part of a template for ebay listings. I already have hundreds of images of my items on the server (several pics per item), and could do without the extra work of making thumbnails for each pic, or manually editing the code for each thumbnail to assign the correct size. If I can do it all using Javascript, it will save me a considerable amount of time.

What I am looking for, is a way to use javascript to detect the dimensions of the original picture, and then depending on whether it is landscape or portrait, "generate" the code needed to assign the correct CSS style (smalltall or smallwide). This can probably be done using document.write? But I am a novice, and am unsure how to do this, and how to detect the original file dimensions.

Wayne

[Brian Chandler]

The problem is that you going to be doing quite a bit of programming to achieve an unreliable (not everyone has javascript enabled) method of not doing quite the right thing anyway.

It is vastly better to write a server script that generates the thumbnail images and the appropriate code for the page. I'm not too familiar with using Ebay, but can you host the pages yourself (easy, reliable) or do you have to send stuff to Ebay (tedious, unreliable, because they will no doubt mangle it)? Even if the latter, you can still serve the reduced sized images off your own server, and you can generate the code you need to send to Ebay. Presumably there is some mechanism for doing this efficiently for high-volume users?

Anyway, if you are only squeezing the images down in the browser, what's the point? Why not just let people view them full size, if they have already downloaded them?

[Tom H.]

Another approach is to use the batch processing feature of image editing software such as Adobe Photoshop to generate the images and HTML links. Likewise, if you develop your listing pages offline, batch processing features of your web authoring software may help automate the task.