|
devshb
Senior Member
United Kingdom
1904 Posts |
 Posted - March 23 2004 : 13:24:22
|
I don't know about javascript, but I did the same thing once for my site to make sure that all thumbnails were a certain size. Here's some asp code you might find useful:
Sub FuShowProductPicture(arg_type,arg_filename,arg_suffix,arg_orig_width,arg_orig_height,arg_show_desc_flag,arg_desc,arg_size_type,arg_startcol,arg_endcol,arg_valign,arg_halign)
' Size Types: FULL
' THUMBS
' SMALLTHUMBS
' Types: ICON
' IMAGE
Dim new_width
Dim new_height
Dim max_dimension
Dim start_dimension
Dim pct_size_change
Dim img_id
if arg_size_type="FULL" then
new_width=arg_orig_width
new_height=arg_orig_height
else
if arg_size_type="THUMBS" then
max_dimension=175
end if
if arg_size_type="SMALLTHUMBS" then
max_dimension=100
end if
if arg_size_type="VERYSMALLTHUMBS" then
max_dimension=50
end if
if arg_orig_width>=arg_orig_height then
start_dimension=arg_orig_width
else
start_dimension=arg_orig_height
end if
pct_size_change=((max_dimension/start_dimension)*100)
new_width=Round(arg_orig_width*(pct_size_change/100),0)
new_height=Round(arg_orig_height*(pct_size_change/100),0)
end if
img_id=arg_filename&"_"&arg_suffix
if (arg_startcol="Y") then
Response.Write vbcrlf&"<TD"
Response.Write " ALIGN="&arg_halign
Response.Write " VALIGN="&arg_valign
Response.Write ">"
end if
if arg_show_desc_flag="Y" then
Response.Write "<br>"
Response.Write arg_desc
Response.Write "<br>"
end if
if arg_type="ICON" then
Response.Write "<IMG SRC='../pics/products/tn/"
end if
if arg_type="IMAGE" then
Response.Write "<IMG SRC='../pics/products/"
end if
Response.Write arg_filename & "."
Response.Write arg_suffix & "'"
Response.Write " WIDTH="&new_width
Response.Write " HEIGHT="&new_height
Response.Write " BORDER=1"
Response.Write " NAME="&img_id
Response.Write ">"
if (arg_endcol="Y") then
Response.Write vbcrlf&"</TD>"
end if
End Sub
The call would be something like:
FuShowProductPicture "ICON","prod1234","jpg",400,400,"N","","THUMBS","N","N","MIDDLE","CENTER"
What this does is enlarge or shrink any image to a fixed size so that the overall shown image is always a uniform size, but without making the image skewed (ie it stays in proportion). If the height is too big then it'll make it shorter, and if the width is too long then it'll make it narrower, so if you used this function when printing an image, your final image will always end up within a specific dimension. This stretching/shrinking logic could also be applied to a javascript function; the key part to it is calculating the percentage change.
The "400,400" arguments in the example function call relate to the actual physical size of the image file; I store these in my database along with the filename, but I guess you could get this dynamically somehow. It should work for any image (tall+thin, short+fat etc), with your shown image being the same dimension regardless of the original width/height of the image.
If you want an example of where this is used, have a look at:
http://www.java-e.com/a/browse_products_results.asp?a=2&b=6&c=X&d=1&e=4&f=0&g=1
(the [details] popup page for each product uses the same logic, and the resizing is more obvious there)
Simon Barnaby
Freelance Developer
Java-E UK
[email protected]
Edited by - devshb on March 24 2004 04:31:43 |
 |
|
|
Jill
VP-CART Super User
USA
249 Posts |
Posted - March 24 2004 : 07:37:27
|
You could also possibly do what I do, and that is to specify either the height OR width in your IMG SRC tag. By specifying only one dimension, each image will retain it's own height-to-width proportions, but all will be a fairly uniform size.
Jill
|
|
|
|
ProductivePC
VP-CART New User
USA
199 Posts |
Posted - March 29 2004 : 14:14:59
|
I like to keep full control over my images sizes and I like to keep full control over load time. Yes, it is a LOT of work however here are the pros and cons of doing this both ways
Auto image resizing
Pros
Less images to deal with
Easy Implementation
Cons
You are stuck with whatever the biggest image size is
an AOL proxy server can handle a 3kb a second to transfer rate to a user. (This is what the user sees low end)
If that image is 90kb then now what? You thumbnail will still be 90kb no matter what size you resize it to. So you expect that phone line user to wait 30 seconds for that 1 thumbnail image to download.
Absolutely unacceptable.
Less control over what you want to do. You cannot add a border to the thumbnail picture because it will change all of it. You cannot add effects onto the image because it will change the bigger one as well or visa versa.
Handling each image individually
Pros
Full control over all images
Full optimization control over all images
Full load time control over all images
(Those 3 things say it all)
Cons
If you have a lot of images, you are in image hell trying to work with them all... whew... many hours were spent optimzing all of the images and thumbnails.
Anyway, that is my two cents. If anyone out there is thinking of auto-resizing they should take into consideration the above tips.
Hope it helps.
Wayne
www.WorldFamousGiftBaskets.net |
|
|
All Forums
Image Resizing
New Topic
Printer Friendly
Topic 
TrustGuard - PCI Security Scanner
