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:
HTML:
-
-
<div id="protoflow">
-
<img src="imgs/DSCN0940_91360.jpg"/>
-
<img src="imgs/stimme_von_oben_187192.jpg"/>
-
<img src="imgs/Tropfen_1_Kopie_201721.jpg"/>
-
<img src="imgs/farbraum_012_147508.jpg"/>
-
<img src="imgs/IMG_4906_199357.jpg"/>
-
<img src="imgs/Tropfen_1_Kopie_201721.jpg"/>
-
<img src="imgs/Fries_201253.jpg"/>
-
<img src="imgs/Fries_201253.jpg"/>
-
</div>
-
-
<ul id="protoCaptions" class="protoCaptions">
-
<li>Caption 1</li>
-
<li>Caption 2</li>
-
<li>Caption 3</li>
-
<li>Caption 4</li>
-
<li>Caption 5</li>
-
-
<li>Caption 6</li>
-
<li>Caption 7</li>
-
<li>Caption 8</li>
-
</ul>
-
JAVASCRIPT:
-
-
Event.observe(window, 'load', function() {
-
cf = new ProtoFlow($("protoflow"), {captions: 'protoCaptions'});
-
});
-
3.7 rating from 60 votes
Very cool! It would be great to be able to slide (as an option) the images vertically using mouse wheel.
Looks great in Safari!
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 ]
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
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!
Very nice.
Here’s a real flow (developed with InfiView and Bindows)
http://infiview.bindows.net/tomcat/InfiView/1.5/test/MovingEdgeTester.html
Don’t forget to click on the Start button :)
Add elements, connect them, move them, have fun!
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.
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.
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…
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.
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?
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 :)
Please check out the latest updates to ProtoFlow
* Fixes the way captions are done
* Adds Reflection support
Well Done Obaid, awesome work
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:
http://www.classycode.co.uk/CoverFlow
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…
Cheers,
Raith