Finn Rudolph has created a very nice "cover flow" type of control in JavaScript called ImageFlow (which is an improvement of Michael L. Perry's Cover flow).
It's a very nice package and quite easy to use! However, it currently has a few code shortcomings. My primary issues with it was that it defined everything in a global scope (with common names that easily clash with other functions) and that it assumes the photos are in a static page and thus initializes itself when the web page loads. The later issue was the biggest thing I needed to fix since I wanted to use it in an Ajax application where I'm getting the images as a result of an XMLHttpRequest.
- I added an "ImageFlow" scoping around the whole package so that all the variables and particularly the functions aren't global to my whole application (and potentially clashing).
- I added "var" declarations for many of the variables which didn't specify "var" so that they would not become fully global variables, but only global to the ImageFlow scope.
- I changed the "onload" function to be an "initialize()" function so that I could execute it when my page was ready
- I made all the variables and functions totally private to ImageFlow with the only publicly visible function being "intialize()"
- Since the images in the image flow div are now loaded sometime after the page is loaded, I added a check to the initialize function determine when all images are really loaded (otherwise some would be sized wrong).
Now, whenever you're ready for the ImageFlow to be displayed, just call "ImageFlow.initialize()"
If you're interested in these updates, you can download my altered imageflow.js. I have also submitted them to Finn, so hopefully they will be adopted into the official version.
NOTE: The file was updated on January 18, 10:00am EST after running it through JSLint -- which I should have done before posting it originally.
Update January 18: I've added a new article describing the addition of a scaled down version of Lightbox2 without modifying ImageFlow.
6 comments:
Hi Steve,
I would love to try this out. The js is giving me a forbidden page. Just wondering if there is something I need to do to get it. Thanks! Micah
Sorry about that, I had a rule in my .htaccess file that was preventing linking to JavaScript files.
Thanks! I got it now!
(I'm going to try to use your implementation to see if I can get it working with reflection.js. I'd love to get the reflection working with javascript!)
I considered that myself, but since the second question of the FAQ states:
Is it possible to get the reflection with Reflection.js? Unfortunately not: The Reflection.js reads out the source image and creates a second image containing only the reflection. The source image is then replaced by a div container including the source image and the reflection image. The problem is that ImageFlow fails to change the attributes of the source image, which has been replaced by the Reflection.js.
I decided not to bother. But good luck on your attempt and please let me know if you get it working!
I'm also considering updating the LightFlow to by more Ajax friendly by accepting JSON or XML data for the image list and building the appropriate HTML from that, but I don't really want to create another fork of the ImageFlow code. So far, my updates just delayed the initialization, but kept the other functionality the same.
Hello,
I am using ImageFlow, but I have a large number of images (more than 100). I read your post and I wanted to ask you how you used the XMLHttpRequest.
Thanks.
Gianluca
Your rebuild imageflow.js works perfect for me.
Thanks a lot :)
Post a Comment