Introducing ProtoFlow
January 24th, 2008 | Published in Javascript, ProtoFlow, Prototype, Scriptaculous | 6 Comments
ProtoFlow - CoverFlow effect (or similar to coverflow effect) using Prototype & Scriptaculous.
Over the past day or so, I have been working on this class based on Prototype and Scriptaculous libraries that simulate CoverFlow effect found in Apple products such as iTunes and now standard feature on Leopard. I am far from done but the idea is to play around and learn so I am not in a big hurry to finish it off completely.
What is ProtoFlow?
It is a very simple class that would allow existing websites to just plug-n-play and create CoverFlow effect instantly. Here are quick features that it currently supports:
- Generic stack: Elements that are being displayed does not have to be images. They can be any HTML element. So if you have a UL with bunch of LI’s in it you can create CoverFlow for that. (more on this when I release the code)
- Caption (optional): You can attach captions to every slide making any list of images an impressive slideshow instantly!
- Slider: Slide throw your list using Scriptaculous slider class.
I will be releasing the code for this later on but do let me know if there are other features that you would like to have in this widget.
Here is a quick screenshot for you (click to enlarge):
January 28th, 2008 at 3:16 pm (#)
Hi,
a solution for cover flow functionallity bases on prototype/scriptaculous would be great. The most important thing in my point of view is performance. If you have to wait to long it wouldn’t be used by the visitor.
- different animation option bent, straight
- automatic mode - stopps with mouse over
- slider at bottom
Looking forward to your release!
Matze
February 21st, 2008 at 8:12 am (#)
Hi,
I was looking for a customizable coverflow effect with
- automatic mode, stops when mouse over
- control with slider also
- possibility to go to an external url/page when you click on the picture.
- customize the slider, background
- doesn’t need a lot of cpu ressources, many coverflow effect slow down the computer, so the internet navigation, not really cool because you have to leave the website…
I’m asking it for a commercial website so I would be happy to pay for your script if it’s great !
You can contact me by email ^
March 2nd, 2008 at 10:55 am (#)
I’m actually looking just for the ability to “throw” an object. Similar to what you can do with these new photo albums that let you throw a picture around on the application. Not sure if you’ve got that in your design or not, but would be sweet.
March 16th, 2008 at 12:39 pm (#)
Blake: Not sure what you mean by “throw” a picture?
Do you mean that you want to be able to simply put pictures in one of the directories and want this widget to automatically use that image?
January 4th, 2009 at 5:21 am (#)
Check out:
http://www.blokrok.com/main/scriptaculous2
A crude example using friction physics. (Toss/throw/flick the todos). You can also flick the day panel. I didn’t hack apart scriptaculous because it was just easier to write a couple functions to do it.
June 7th, 2010 at 8:48 am (#)
I’m trying to insert the script into a page now. I’m getting a problem of the stagnant images just floating within the table. Any suggestions as to what the problem might be?