Introducing ProtoFlow

January 24th, 2008  |  Published in Javascript, ProtoFlow, Prototype, Scriptaculous  |  4 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):

ProtoFlow

Responses

  1. Matze says:

    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

  2. fenrir says:

    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 ^

  3. Blake says:

    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.

  4. Obaid says:

    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?

Leave a Response