Tuesday, March 11th, 2008

ProtoFlow: Coverflow for Prototype

Category: Component, JavaScript, Prototype, Scriptaculous

Obaid Ahmed has written a coverflow-like component on top of Prototype and Script.aculo.us called ProtoFlow.

It is simple to use:

  1. <div id="protoflow">
  2.     <img src="imgs/DSCN0940_91360.jpg"/>
  3.     <img src="imgs/stimme_von_oben_187192.jpg"/>
  4.     <img src="imgs/Tropfen_1_Kopie_201721.jpg"/>
  5.     <img src="imgs/farbraum_012_147508.jpg"/>
  6.     <img src="imgs/IMG_4906_199357.jpg"/>
  7.     <img src="imgs/Tropfen_1_Kopie_201721.jpg"/>
  8.     <img src="imgs/Fries_201253.jpg"/>
  9.     <img src="imgs/Fries_201253.jpg"/>
  10. </div>
  12. <ul id="protoCaptions" class="protoCaptions">
  13.     <li>Caption 1</li>
  14.     <li>Caption 2</li>
  15.     <li>Caption 3</li>
  16.     <li>Caption 4</li>
  17.     <li>Caption 5</li>
  19.     <li>Caption 6</li>
  20.     <li>Caption 7</li>
  21.     <li>Caption 8</li>
  22. </ul>

  1. Event.observe(window, 'load', function() {
  2.   cf = new ProtoFlow($("protoflow"), {captions: 'protoCaptions'});
  3. });


Posted by Dion Almaer at 7:28 am

3.7 rating from 72 votes


Comments feed TrackBack URI

Very cool! It would be great to be able to slide (as an option) the images vertically using mouse wheel.

Comment by Les — March 11, 2008

Looks great in Safari!

Comment by ajaxus — March 11, 2008

I combined ImageFlow and Reflection.js to generate a stand alone script to do the same.

I am currently integrating it in my web site but you can download the framework from http://www.AstraNOS.org/utils/ImgFlow.tar.gz

You can see it in action by loging in as guest and then go to [ SystemMenu -> Utils -> ImgFlow ]

Comment by AstraNOS — March 11, 2008

Yeah. It’s ok i guess. But it’s nothing that hasn’t been done before or could be easily achieved using someting like jQuery much more simply

Comment by Jamie — March 11, 2008

I would love to see you upload this widget to the Appcelerator community. We have a very clean widget API, that will make your widget callable via a very simple HTML tag through our web expression language. I suggest checking it out at http://www.appcelerator.org

Nice work!

Comment by appceleratorBen — March 11, 2008

Very nice.
Here’s a real flow (developed with InfiView and Bindows)

Don’t forget to click on the Start button :)

Add elements, connect them, move them, have fun!

Comment by ranmeriaz — March 11, 2008

Very nice work. One thing that sticks out for me, and you can see it in the screenshot, is the center image not being in front. But I’m sure that’s an easy fix, keep it up.

Comment by Nick — March 11, 2008

Awesome effect, but like some have said, it’s nothing that hasn’t been done before.

And maybe it’s just me, but I don’t find this practical in a real web application.

Comment by musicfreak — March 11, 2008

Nice script, but… I wished it was more accessible.
Why do we need to add an extra unordered list with the caption when it’s easy to parse the alt or title attributes to recreate that list…

Comment by Marin — March 11, 2008

Why aren’t the captions are along side the IMG in the markup ? That sounds like bad accessibility to me. :\

Also, that script does not seem to hide furthest images when there are many and the animation gets laborious.

Comment by p01 — March 11, 2008

I don’t mean to slate something that has clearly taking someone quite a while to accomplish, but I feel obliged, because this is the third or forth time I’ve seen this particular effect mimicked:
Is this what we’ve been reduced to, is this all we can do nowadays, copy some attractive, yet rather useless effect Apple designed last year? What ever happened to originality? Why is this news?

Comment by dearsina — March 12, 2008

Thank you everyone. I am re-working on captions and the fix will be up soon.

Dearsina: This is part of much larger effort. I wanted to learn JS and Protoflow is just a by product of that. Sometimes, it is easier to reporduce an existing solution to learn something new :)

Comment by ob — March 12, 2008

Please check out the latest updates to ProtoFlow

* Fixes the way captions are done
* Adds Reflection support

Comment by ob — March 13, 2008

Well Done Obaid, awesome work

Comment by Adnan Siddiqi — March 14, 2008

Hi guys,

I’m sure some of you won’t be interested in yet another CoverFlow rip-off but I’m guilty of just that. So, for those of you who can bear the tedium, I’d be happy to hear your comments on this attempt:

I wrote it for presenting music covers on a friend’s music website, it’s not a general purpose image slideshow viewer carousel flow thing. So, unlike some javascript “coverflow” scripts, this really is intended to do the same job as Apple’s eye-candy distraction. It’s NOT meant to be a 100% accurate remake though….

I don’t like the overlapping covers so I’ve spaced mine apart more. To fit more in I’ve folded mine back further. And mine is a terrible fake where the images don’t actually spin back in a proper 3d way – it’s just a cunning visual bodge.

It is very fast though. And when coupled with my iPod style dial (programmed separately a couple of years back) it really looks the business – thanks to good old reflection.js (which I had to hack a bit).

The code won’t meet your stringent standards and it doesn’t really use any Ajax. I haven’t implemented the captions yet (though you’ll be pleased to hear they will come from the title attribute, if ever). Oh hell, you can make up your own minds and flame me if you don’t like it…


Comment by Raith — March 25, 2008

keep up the good work :)

Comment by MarkHilton — August 20, 2009

Leave a comment

You must be logged in to post a comment.