Ajaxorized proudly presents... the Image Transition Manager. The Image Transition Manager is a javascript library based on scriptaculous and prototype. It supports several image transitions, such as fading, appearing, sliding, growing and shrinking and more to come.

While working on a project for a customer, I needed to create a kind of slideshow-like effect for presenting several photos of products. When I started out making this 'effect', I found out that I could use this for much more other projects than just this single one. That is what triggered me to create a nice class out of it, so I could easily implement it into my other projects. After showing my first version to Willem, he did some of his magic and extended my class with some other nifty image transitions and functionalities. That is how our Image Transition Manager was born.

The advantage of our library is the way in which you can implement it in your own projects. While I prefer learning by doing, here is an example:

<ul>
<li><a href="image1.jpg" rel="transition[switchoff]">image1.jpg</a></li>
<li><a href="image2.jpg" rel="transition[slidedown]">image2.jpg</a></li>
<li><a href="image3.jpg" rel="transition[blinddown]">image3.jpg</a></li>
</ul>

As you can see, no inline-javascript is used. Just add a 'rel'-attribute to the anchor and the Image Transition Manager will do the rest. Finally, add a holder for the images and instantiate the class:

<div id="holder" style="border: 5px solid #999999; width: 640px; height: 480px; float: left"></div>

oTransition = new Transition( 'holder', 'image1.jpg' );

That is all to create some cool-looking effects. For more information and to download this library, check out the project page of the Image Transition Manager.