The gallery script I posted about on Friday was a nice improvement on plain image switching, but didn’t quite have the elegance I was looking for, particularly when switching between images of different sizes. Yesterday, I managed to grab some time to play around with resizing images using javascript so as to produce a smoother transition. The effect is rather pleasing.

It works by preloading each image shortly before it might be needed, and using the dimensions of the preloaded image to calculate increments to change the displayed image dimension by. After stepping through the resizing, we then switch the previous image to the background, change our container’s source to the new image, and fade it in.

You can find the code and see a sample here.

Recommend this post:

Related Posts

• Fading In With Javascript
• Bazzani.com Launches
• More WiFi Google Mapping
• Book Review: Learning jQuery
• Book Review: Pro Javascript Design Patterns