Expando Image Script

[jscheuer1]

1) CODE TITLE: Expando Image Script

2) AUTHOR NAME/NOTES: jscheuer1

3) DESCRIPTION: Expando is an entry level script for folks who want to have an image expand onmouseover. Usage is simple. Install the external script in the head of the page, set the width and height attributes of the image or images you wish to receive this treatment to a reduced size, and give them the expando class. On mouseover they will expand to their actual size. On mouseout they will return to the reduced size set by their width and height attributes. AJAX friendly, imported content with images with the expando class will be immediately recognized by the script.

4) URL TO CODE: http://home.comcast.net/~jscheuer1/side/expando/

[jlizarraga]

XD This is awesome.

[ddadmin]

I like it! Nice and simple, but useful. If I had to make a suggestion, it'd be to tweak the resize function so it's not linear/ increasing at a uniform rate. It's fun to experiment with different equations. For example, you can use the cos() function to derive an animation that speeds up before eventually coming to a stop at the end. Or less fancy, an equation that causes the animation to move along at an increasing or decreasing speed (ie: in this case). Certainly not a big deal either way, but IMO a nice touch.

[jscheuer1]

Not that I doubt what you are saying dd, but I'm not all that familiar with the Math.cos() method, or sines and cosines in general, although at one point I did deal with them quite a bit as regards celestial mechanics, just been awhile.

I did a little experimenting and found that as the number increases or decreases, the absolute value of the cosine of the number varies widely and flip flops as regards its sign (positive or negative), so it's a little hard to imagine how that would create anything smooth. But I have seen scripts that do use Math.cos() to good effect, just can't recall one at the moment. Could you point me at an example?

However, I also seem to recall that Math.cos(), if not always, then at least sometimes, makes a script so intensive that some browsers just slow down - more than what is intended.

This script is already a little challenging for KHTML based browsers like Safari and Chrome (one image is fine, but one getting larger while another gets smaller is a little choppy), so on just that basis, I would hesitate introducing more computations.

That's not to say that I wouldn't want to understand this whole Math.cos() thing better.

[ddadmin]

There's a helpful article that talks about creating JS animations using the sinus curve, but it seems to be down at the moment: http://ajaxcookbook.org/transitions-animation-effects/ An example function would be:

(1-Math.cos((i/100)*Math.PI)) / 2

As i increases, the equation returns a decimal closer and closer to 1 in a curved manner- that is, the returned value gradually increases, reaches a peak, before slowing down until eventually stopping at 1. This returned value can then be used as the "percentage" variable multiplied by the final width/height, to derive the current animation point.

You can see a visual of this with something like:

for (var i=1; i<100; i++){
var degree=(1-Math.cos((i/100)*Math.PI)) / 2
document.write(degree+"<br />")
}

Personally I haven't really noticed a degradation in speed when modifying an animation to not be linear, at least on my PC. I think the result is worth it though, and it's just fun trying to make use of stuff we learned in school about Math again.

[jscheuer1]

I'm all for PI (pie) this time of year. That's probably the missing element in my thinking, I now do recall it being important in calculating the apparent orbits of planets and the apparent arcs of stars.

It's getting late at the moment for me though, so I will go over your examples another time. Hopefully by then the site you linked to will be back up as well.

[jscheuer1]

Either my eye isn't sensitive enough, or I missed something in the math. Basically, I changed:

return (dim[0] - dim[1]) * e.ims[i].jump / times + dim[1] + 'px';

to:

return (dim[0] - dim[1]) * (1 - Math.cos(e.ims[i].jump / times * Math.PI)) / 2 + dim[1] + 'px';

But I couldn't tell any difference.

[ddadmin]

Hmm in your original question:

return (dim[0] - dim[1]) * e.ims[i].jump / times + dim[1] + 'px';

Does the part in red return a fraction (between 0 and 1) that represents the degree of the final width of the image, where 0.1=10%, 1=100% etc? I can't tell easily the various parts of your equation above.

In general though the idea is for using the equation (1-Math.cos((i/100)*Math.PI)) / 2 in an animation is to repeatedly multiple that with the final image's width or height (ie: using setInterval) to get a portion of that final value so it gradually increases to the final value. Something like:

var curstep=0, totalsteps=100
var finalwidth=560 //final image width

var myanimate=setInterval(function(){
	if (curstep<totalsteps){
		myimage.style.width=(1-Math.cos((curstep/totalsteps)*Math.PI)) / 2 * finalwidth
		curstep++
	}
	else
		clearInterval(myanimate)
}, 10)

Totally untested, but I think you get the idea.

[jscheuer1]

I got the idea pretty much from post 5, thanks for that again. The problem was, and I said I was tired, I was editing a different page than I was viewing. The effect using Math.cos() isn't all that dramatic, but it is noticeable, and a nice touch now that I am at least viewing the page that I am editing. DOH!

Anyways, I've updated the demo as well:

http://home.comcast.net/~jscheuer1/side/expando/

[ddadmin]

Nice John! I like the new animation a lot more. Yes it's subtle, but definitely noticeable. I'll have to get to posting this script on DD in the next few days.