View Full Version : Expando Image Script

12-15-2008, 03:50 AM
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/

12-15-2008, 06:12 AM
XD This is awesome.

12-15-2008, 08:27 AM
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.

12-15-2008, 09:23 AM
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.

12-15-2008, 09:44 AM
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. :)

12-15-2008, 09:52 AM
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.

12-15-2008, 04:09 PM
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';


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.

12-15-2008, 10:39 PM
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
}, 10)

Totally untested, but I think you get the idea. :)

12-16-2008, 04:22 AM
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:


12-16-2008, 08:42 AM
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.

12-16-2008, 11:52 PM
Just a heads up that the script is now posted: http://www.dynamicdrive.com/dynamicindex4/expandoimage.htm :) Looking good!

One future improvement I can think of relates to how the mouse cursor will often inadvertently no longer be over the image when it enlarges, causing the image to contract. By the look of the default CSS I gather you've aware of this issue already. Not sure how to go about minimizing it- perhaps instead of just contracting an image onMouseout, add another condition that the mouse cursor must have moved as well? Either way, nice script!

12-17-2008, 02:25 AM
Looks great! Just one typo I noticed:

Expando is an simple script for folks who want . . .

Should be a not an. I know, you were copying and editing and the spell checker wouldn't pick up on a usage thing like that. I had originally used 'an entry level script', which is probably too condescending for the demo page.

12-17-2008, 03:54 AM
Typo fixed. :)

12-17-2008, 04:09 AM
I noticed that this script opens diagonally down. I suggest having a choice of which way to go. For example on this page: http://browsershots.org/http://www.google.com/ It opens all around. It would also be nice if you had it overlap the content like in the link I provided. Nice job John!

12-17-2008, 04:25 AM
Well Nile, I had wanted to keep it simple. I believe though that if you were to create a relatively positioned container and absolutely positioned the image, various effects could be easily achieved. And if you were to combine it with a single celled table with the proper positioning of table and image and the style of the the table cell as far as alignment goes, other possibilities would emerge.

01-17-2009, 11:25 AM
Hi all Great coders ...
where i can download expando.js

that was a amazing javascript for image ever seen

01-17-2009, 11:34 AM
If you go to the link that John posted and view source you can see a link to this .js file:
http://home.comcast.net/~jscheuer1/side/expando/expando.js (http://home.comcast.net/~jscheuer1/side/expando/expando.js)

Make sure you put the copyright notice on your html page as well.

01-17-2009, 12:03 PM
Hi all Great coders ...
where i can download expando.js

that was a amazing javascript for image ever seen

This script is now an official part of the DD Library, you can get it from the demo page: