SEARCH FINESCALE.COM

Enter keywords or a search phrase below:

Auto-resizing of images

3182 views
18 replies
1 rating 2 rating 3 rating 4 rating 5 rating
  • Member since
    December 2002
  • From: Pominville, NY
Auto-resizing of images
Posted by BlackWolf3945 on Saturday, June 7, 2003 7:00 AM
Just curious when this was started. I only noticed it,... yesterday? I don't recall exactly.

Anyhoo, I can understand the various possible reasons for it. I, for one, am glad that it was done. There are a couple of posts where the images were SOOOO large that I wore out the mouse on the bottom scroll bar. (Okay, I know, you can't wear out a laser mouse that way...)

I try to limit the size of my images so that they fit decently. But I admit that I sometimes go nuts with the pikshurs!! Every other post turns into an illustrated novel. Hope my posting habits weren't a contributing factor. Blush [:I]


Fade to Black...
  • Member since
    December 2002
  • From: Waukesha, WI
Posted by David Voss on Saturday, June 7, 2003 8:05 AM
I was wondering when someone was going to inquire about it. Smile [:)]

It's only been a couple of days now.

I like the big pictures, but they were pushing out the page horizontally. I didn't want to tell people to stop posting pictures that were over a certain width -- especially if there was a way for me to control the width.

I've had an idea I've been kicking around in my head for awhile now. I just wasn't sure of how to do it. Finally, a couple of nights ago, I spent a couple hours (after everyone else went home) trying a few things. I wasn't able to completely finish working on it. When the cleaning crew unknowingly turned off the lights on me, I figured it was time to call it a night and head home.

Anyways, for those of you still reading this... Wink [;)]

Don't stop posting the large pictures -- I think I have a cool workaround. Smile [:)]

If you've been to our catalog, you may have noticed how we display the larger versions of the product images. Well, that's what I wanted to do here.
http://store.yahoo.net/kalmbachcatalog/12240.html

For images over a certain width, I wanted to limit the width of the image inside the forum, but allow you to click on the image to view it in it's original size. The only thing that remains is providing a visual cue indicating which images have been "auto-resized" and can be clicked to view the large version.
David Voss Senior Web Developer Kalmbach Publishing Co. Join me on the FSM Map
  • Member since
    November 2005
Posted by Anonymous on Saturday, June 7, 2003 11:34 AM
I noticed as well and appreciate the effort. I suffer from DMS (Dinky Monitor Syndrome) and hate wide pages.
  • Member since
    January 2003
Posted by shermanfreak on Saturday, June 7, 2003 2:50 PM
And here I thought my eyes were playing tricks on me ..... again .... still.
Happy Modelling and God Bless Robert
  • Member since
    November 2005
Posted by Anonymous on Saturday, June 7, 2003 3:59 PM
Just goes to prove that the little things in life mean so much. Keep up the good fight, David. We're all cheering for you.
  • Member since
    December 2002
  • From: Pominville, NY
Posted by BlackWolf3945 on Sunday, June 8, 2003 2:27 AM
Outstanding, Dave. That's a way cool deal. For now I'm simply posting links to larger images along with the image itself.

FSM ROCKS!!!


Fade to Black...
  • Member since
    December 2002
  • From: Waukesha, WI
Posted by David Voss on Monday, June 9, 2003 6:48 PM
One more piece of the puzzle is in place. Smile [:)]

Visit this page -- it has quite a few large images:
http://www.finescale.com/fsm/community/forum/topic.asp?TOPIC_ID=3717

When the page is done loading, the images should automatically resize themselves (down to a max width of 350px). If you click on the image, you should see a larger image appear.

You can move the large image by clicking & holding down the mouse button on top of the tan bar above the image. To the right is a link which reads "Click to Close". Click on that or the "X" to close the large image. You can also click on the original image within the post to close the large image.

The next thing I'll have to work on sometime is a visual cue indicating which images have larger images to view.

Let me know how this works for all of you.
David Voss Senior Web Developer Kalmbach Publishing Co. Join me on the FSM Map
  • Member since
    December 2002
  • From: Waukesha, WI
Posted by David Voss on Monday, June 9, 2003 6:53 PM
I'll make it easier to test...

Here's an image that was originally 395px wide, it should resize to 350px wide. Click on the image below and you should see the larger version popup on the screen. Smile [:)]



There are still a couple of minor issues I have to work out. Mozilla currently doesn't display the large image. Sometimes the images won't resize unless the page is refreshed.
David Voss Senior Web Developer Kalmbach Publishing Co. Join me on the FSM Map
  • Member since
    December 2002
  • From: Pominville, NY
Posted by BlackWolf3945 on Monday, June 9, 2003 8:28 PM
In talking with a few of my pals, we've noticed some of the issues that you mentioned, Dave. (Resize on refresh, etc. No biggie, though!)

Anyhoo, you're doing a great job in coming up with yet another feature that'll make browsing the forums a bit easier for alotta folks.

As far as the visual cue, can't you simply have the cursor change to the "finger-pointing hand" whenever it passes over an enlargable image? Or does that entail alotta work? I have no clue, I'm no web-monkey myself! Tongue [:P]

Thanks 2 much! You're an ace in my book!


Fade to Black...
  • Member since
    December 2002
  • From: Waukesha, WI
Posted by David Voss on Wednesday, June 11, 2003 1:40 PM
QUOTE: Originally posted by blackwolfscd

As far as the visual cue, can't you simply have the cursor change to the "finger-pointing hand" whenever it passes over an enlargable image? Or does that entail alotta work? I have no clue, I'm no web-monkey myself! Tongue [:P]


Actually, that's a great suggestion. It's doesn't entail much work at all. In fact, I just implemented it. Check it out. Smile [:)]

One note about the resizing of images...the images are still the same images. I'm just using javascript to modify the dimensions of the image as it is displayed. What this means is that if the image is 1MB, it's still 1MB no matter how small it appears on the page.

Oh, I modified the script to check each image after it loads. You'll see it loading in it's original size, but once it's completely loaded it will automatically resize itself.
David Voss Senior Web Developer Kalmbach Publishing Co. Join me on the FSM Map
  • Member since
    November 2005
Posted by Anonymous on Wednesday, June 18, 2003 7:25 AM
This little mod almost does exactly what I need. Our forums have piles of people with really tall sig images that make reading threads a realy pain.

Can I simply replace the word 'width' with height in the java portion in order to make sure images fit a specific height requirement?
  • Member since
    December 2002
  • From: Waukesha, WI
Posted by David Voss on Wednesday, June 18, 2003 9:38 AM
QUOTE: Originally posted by Kornkob
Can I simply replace the word 'width' with height in the java portion in order to make sure images fit a specific height requirement?


Sure, just replace thisimage.width with thisimage.height in the resizeImage function. There are some tweaks I would like to make at some point, but I don't have the time right now.

While it's not a perfect solution, when it works, it's great. Smile [:)]
David Voss Senior Web Developer Kalmbach Publishing Co. Join me on the FSM Map
  • Member since
    December 2002
  • From: Pominville, NY
Posted by BlackWolf3945 on Wednesday, June 18, 2003 3:32 PM
For the most part it's workin' okay. But every once in awhile the images still come up full size. Tweak, tweak, tweak... Tongue [:P]


Fade to Black...
  • Member since
    November 2005
Posted by Anonymous on Thursday, June 19, 2003 12:35 PM
Woudl it be practical for me to duplicate the width requirement lines of code with height requirement so that both dimensions are size restricted?
  • Member since
    December 2002
  • From: Waukesha, WI
Posted by David Voss on Thursday, June 19, 2003 1:07 PM
QUOTE: Originally posted by Kornkob
Woudl it be practical for me to duplicate the width requirement lines of code with height requirement so that both dimensions are size restricted?


I wouldn't set both at the same time. Your image will become distorted. Either set the width or the height and let the browser adjust the other proportionately. To do this, you would want to check which one is the larger of the two -- the width or the height. Then adjust accordingly.

The following code should do that. You'll need to change the variables to the max width and max height you want to allow for the site.

Hope that helps!

[code]
<SCRIPT LANGUAGE="JavaScript">
<!--

// Set the Maximum Width and Height
var maxImageWidth = 350;
var maxImageHeight = 350;

function resizeImage(thisimage) {
if (thisimage.height > thisimage.width) {
// check and modify height if needed
if (thisimage.height > maxImageHeight) {
thisimage.height = maxImageHeight;
thisimage.style.cursor='hand';
}
} else {
// check and modify width if needed
if (thisimage.width > maxImageWidth) {
thisimage.width = maxImageWidth;
thisimage.style.cursor='hand';
}
}
}

// End -->
</script>
[/code]

Oh, if you have a lot of scripts on your site, you might want to move the var statements inside the function itself to avoid any conflicts between variables (variable scope).
David Voss Senior Web Developer Kalmbach Publishing Co. Join me on the FSM Map
  • Member since
    December 2002
  • From: Pominville, NY
Posted by BlackWolf3945 on Wednesday, June 25, 2003 2:14 AM
Okay, I'm no netboy, but you already knew that. Tongue [:P]

So needless to say, even though the answer to this question may lay somewhere in that jumble of... stuff up above, I'l ask this. Why do some images never resize, some ALWAYS resize, and some are back and forth? Just curious...


Fade to Black...
  • Member since
    December 2002
  • From: Waukesha, WI
Posted by David Voss on Wednesday, June 25, 2003 11:20 AM
I honestly don't know. I'm a bit puzzled about that. Black Eye [B)]
David Voss Senior Web Developer Kalmbach Publishing Co. Join me on the FSM Map
  • Member since
    May 2003
  • From: USA, GA
Posted by erush on Wednesday, June 25, 2003 1:27 PM
That is a nice feature you've built in David. I like to keep my windows smaller than fullscreen and that keeps me from having to wear my mouse out...ok,it's optical tooBlush [:I]...

It is convenient. Now if you'd just give Ron that subscription break so he'll quit whiningBig Smile [:D]Wink [;)]

Keep up the good work!

Eric
Hi, I'm Eric and I'm a Modelholic too. I think I have PE poisioning.     "Friendly fire...isn't"
  • Member since
    December 2002
  • From: Waukesha, WI
Posted by David Voss on Sunday, October 26, 2003 1:55 AM
QUOTE: Originally posted by blackwolfscd
So needless to say, even though the answer to this question may lay somewhere in that jumble of... stuff up above, I'l ask this. Why do some images never resize, some ALWAYS resize, and some are back and forth?


With the update from today, it should be much better now. Smile [:)]
David Voss Senior Web Developer Kalmbach Publishing Co. Join me on the FSM Map
JOIN OUR COMMUNITY!

Our community is FREE to join. To participate you must either login or register for an account.

SEARCH FORUMS
FREE NEWSLETTER
By signing up you may also receive reader surveys and occasional special offers. We do not sell, rent or trade our email lists. View our Privacy Policy.