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. [:I]
I was wondering when someone was going to inquire about it. [:)]
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… [;)]
Don’t stop posting the large pictures – I think I have a cool workaround. [:)]
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.
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.
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. [:)]
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.
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! [: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. [:)]
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.
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. [:)]
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!
<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>
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).
Okay, I’m no netboy, but you already knew that. [: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…
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 too[:I]…
It is convenient. Now if you’d just give Ron that subscription break so he’ll quit whining[:D][;)]
