I have been working recently on integration a great Imageflow library from Finn Rudolph, which however was code wise err a bit hacky. It was using plain Javascript, with many global variables and some cross browser hacks. Also its lightbox integration was not compatible with Lightbox v2.04.

To practice my Javascript skills a bit I decided to refactor that library. There is another serious alternative called Protoflow, but its scaling algorithm doesn’t work on different sized images well. I made it working quite nicely with Lightbox and additionally cleaning up lots of code. Quite some temporary variables are no longer required due to the object-ness of the widget. It also will not produce namespace conflicts anymore.

The script is available for download here.

I am pretty sure that the code can be still improved. Initially i started with a 1-1 port to Object. Basically just namespacing the whole thing. Then I did an iteration cleaning things up, after that I removed some browser hacks, especially using Prototype Event class for that. After that I cleaned again, and thats how it is now. 6KB compressed using YUIcompressor. I have not yet verified that it works cross browser as good as the original, but thats what I am going to do next. Additionally i try to improve my prototype skills and hack some for each loops.

Expect some updates on this blog entry and the script.

Feel free to post ideas in the comments.

Note that however I am not giving support for this script. Make sure to visit the original Imageflow site first and get a version from there running. There is quite a lot of documentation and help available. Afterwards you may come here again and try my variant of the script :-)

Updated 2.May 2008:

Just integrated the options into the object creation. you can now pass changed options more easily. Also merged a feature that allows you to prevent images being scaled larger than they actually are.