Helpful Information

Category: Looking for such a script or service

Gradual Shrink Image on Load if From Certain URL?

I've looked everywhere for a day or two and can't find a script that will do what I want (even sans URL part), so I'm asking here.

I want a script that will downsize an image (say, 576w x 360h) to a specific size (say, 288w x 180h) gradually on load if the user came to that page from one certain other page (i.e. www.siteinquestion.com/index.html).

In other words, the image will start out large, but will automatically shrink itself small so as to be in the corner and out of the way to make room for other information on the page - but if the user came from any other page than index.html, such as other pages on the same site, the image would start out small and out of the way.

Thanks!

Interesting. Not really sure. But I'm curious to see if that works. Probably does, somehow.
But it would be a bit intense of the browser, maybe.
The other thing, it would probably look really ugly, because the way browsers resize images isn't pretty.

Look of the final image could always be fixed by using a second image that is already that size (could do a CSS hidden layer 'til the script is done/'til a certain number of seconds have passed or could write the second image into the script itself).

Perhaps the script could just be if the referrer is the site's index.html page, do the gradual shrink image thing and then make visible the final image (while making the gradual one hidden), else just make visible the final image.

Thanks for your reply!

Dyno - Sounds like you have it covered. It would be relatively simple to do, and I think your idea of making the final image visible is a good one.

Basically, you should write a javascript function that looks like this (pseudocode):

function shrinkImg()
{

bigImg = findElementById('bigImg');
smallImg = findElementById('smallImg');

smallImg.style.visibility = 'hidden';

finalWidth = 50;
finalHeight = 50;
numSteps = 10;

stepW = (bigImg.style.width - finalWidth) / numSteps;
stepH = (bigImg.style.height - finalHeight) / numSteps;

while (bigImg.style.height > finalHeight)
{
bigImg.style.height -= stepH;
bigImg.style.width -= stepW;
}

bigImg.style.visibility = 'hidden';
smallImg.style.visibility = 'visible';

}

Then in the onLoad event, you'd want to check the last page, and if you want to show the effect you call shrinkImg();

Also, you need to set the id tags of the images on the page to bigImg and smallImg, accordingly.

Lemme know if you have questions.

Thanks, qeorge.

I know enough about JavaScript to alter scripts a bit, but not to write them from scratch.

I've got the pseudoscript you posted as a script making the hidden/visible part work, but no gradual decrease.

Hey DD -

I had some time today to run the code I posted, no bueno. There are a couple of basic mistakes in there.

I have been able to get a simple implementation it to work, but during my googling I stumbled across this page (http://www.nsftools.com/tips/ImageResize.htm), which does a way better job.

So you should just use that guys code. Its way better than mine.

If you have any trouble with it, I can help explain.

Thanks, qeorge.

I'd found that via Google, too. I don't recall if I tried it or not - I thought I tried every script I came across that could possibly be changed to do what I wanted, but I don't recall working on that particular script, so I may have not tried it because it was so long and complicated to get through.

Guess I will have to sit down and try it, though! I will try to do that tomorrow or so.

Okay, I finally got around to trying the script. It works okay, but if the image isn't square (mine isn't - 576w x 360h resizing to 288w x 180h), it only does it gradually 'til it gets to the first point that is the new size (in my case, the height) and then the other side (width in my case) just resizes suddenly. I'm not sure how to fix that.

Also, how hard would it be to change the script so the resizeDelay and resizeIncrement numbers can be specified with the image name and new image percentage size (in other words, image A could be resized at one rate and image B could be resized at a different rate)?

I haven't tried adding the visibility:hidden part yet - I figure the best way to do this whole thing would be having this shrink image on top of the smaller image and when it has resized itself, to hide. That way, the only thing the referrer script has to write is the script and everything else will be the same if that script isn't written because the small graphic will still need to be there if the referrer isn't the specific one.

Okay, I found a way around the square-only need, so no need to answer me about that.

Got the hidden/visible thing working.

Still wondering about the resizeDelay and resizeIncrement thing, however.