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 |
|
|