ProtoFlow first preview release…
March 10th, 2008 | Published in Javascript, ProtoFlow, Prototype, Scriptaculous | 62 Comments
It has been a few weeks since my last post. I got busy with few other client work and didn’t really get any chance to polish up the ProtoFlow widget. So in order to get things moving, I am releasing the code under opensource. I know that there are many talented developers out there who would like to contribute to the code and help us improve it.
So without further delay here is the demo page and the zip file
I look forward to your comments and suggestions.
Update:
Here is the markup for the actual widget:
<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>You can now initialize the Widget (usually done on page load) via:
Event.observe(window, 'load', function() {
cf = new ProtoFlow($("protoflow"), {captions: 'protoCaptions'});
});
The options that you can pass in are:
options = {
startIndex: 2, //which image or stack should the widget focus on after init
slider: true, //show or hide the slider widget
captions: false //do you want to show captions?
};
In fact, the actual “holder” for the images can be anything. You can have a UL with a bunch of LI’s and all those LI’s would be used to create the flow effect. Captions are held in UL (I wanted to use ALT attribute in the images to hold captions but I think this way we can create a ProtoFlow effect out of all sort of HTML elements. Give it a try!
Coming Soon:
- Autoplay - There is some code there right now but its not perfect so that needs to be done for next iteration
March 11th, 2008 at 5:06 am (#)
Whereas it’s much smoother than the one I saw for mootools - I’d really like to see this tackled with human faces instead - you start seeing the failures (at least in the other versions I’ve seen) when you move away from abstract figures and to more recognizable human figures.
March 11th, 2008 at 5:37 am (#)
oh,very good.
it’s like this .(ImageFlow_0.8)
March 11th, 2008 at 5:37 am (#)
[…] Obaid Ahmed has written a coverflow-like component on top of Prototype and Script.aculo.us called ProtoFlow. […]
March 11th, 2008 at 5:43 am (#)
Hey ,
gud job,
but i guess u can use canvas or svg for the reflection part…so anyone using protoflow doesn’t need to add the reflection part to the image himself..It might be a little resource consuming…but i guess its worth a try
try
http://arapehlivanian.com/scripts/reflect/reflect.html
or
http://cow.neondragon.net/stuff/reflection/
March 11th, 2008 at 5:47 am (#)
[…] Para os interessados: PhotoFlow first preview release PhotoFlow Demos Prototype JavaScript Framework Scriptaculos Prototype […]
March 11th, 2008 at 5:48 am (#)
NetRoy: I did try to add reflection but it needed a lot of rework. I will probably add it later on once “autoplay” feature is completed.
bax: Not sure what you mean. Can you elaborate a bit more plz?
cssrain: thank you
March 11th, 2008 at 6:05 am (#)
This is one of the web’s most interesting stories on Tue 11th Mar 2008…
These are the web’s most talked about URLs on Tue 11th Mar 2008. The current winner is …..
March 11th, 2008 at 6:11 am (#)
This person has created a reflection using canvas, maybe something like it could be implemented
http://arapehlivanian.com/scripts/reflect/reflect.html
March 11th, 2008 at 6:19 am (#)
http://194.95.111.244/~countzero/scripts/_myImageFlow/
March 11th, 2008 at 6:28 am (#)
This looks very cool. Started to play around with it and noticed one thing off the bat. When moving left in the flow the image that should be the front image actually sits behind the image on the right of it so the farthest left image is never the image of focus. I haven’t had time to really dig into the code to try and fix but I also noticed somewhere the code forces a square image even though the ones I tested with are rectangular. Again this is first pass at the the script and I have not dug into it to far but it is very cool and smooth. If I have time I will dig further to try and fix these bugs. and submit them back
great work though
March 11th, 2008 at 6:34 am (#)
Mind submitting it to http://scripteka.com ?
Thanks.
March 11th, 2008 at 6:43 am (#)
Andrew: Thank you for pointing out that, I will look into it asap.
NetRoy: That is pretty good implementation. I will try to add reflection soon
Kangax: I just added it to scripteka.com :o)
March 11th, 2008 at 6:59 am (#)
Hi,
cool and nice idea, I think the captions can be written into the “title” or “alt” attribute of the image and there it can be retrieved for the images? It’s only a idea from my side, but this is an amazing effect
greet flo
March 11th, 2008 at 7:01 am (#)
This is very cool and looks very promising.
March 11th, 2008 at 7:10 am (#)
[…] Obaid Ahmed has written a coverflow-like component on top of Prototype and Script.aculo.us called ProtoFlow. […]
March 11th, 2008 at 7:20 am (#)
[…] [view original post] [source: Delicious] Previously - The Secrets Of Grunge Design | Design Showcase | Smashing Magazine Next - […]
March 11th, 2008 at 7:23 am (#)
[…] ProtoFlow: Coverflow for Prototype Obaid Ahmed has written a coverflow-like component on top of Prototype and Script.aculo.us called ProtoFlow. […]
March 11th, 2008 at 8:05 am (#)
I like the idea of using title tags for captions, double purpose.. Here’s the code to do it:
The “big” change is to do a
this.captions = this.stack.map(function(elem) { return elem.title; });
//
// Bigger diff — it’s actually less code…
//
if (this.options.captions != false) {
this.captions = this.stack.map(function(elem) { return elem.title; });
this.useCaptions = true;
this.captionHolder = new Element(’div’);
this.captionHolder.className = “captionHolder”;
this.captionHolder.setStyle({
width: “100%”,
textAlign: “center”,
position: ‘absolute’,
left: “0px”,
top: (Element.getHeight(this.elem) - 80) + “px”
});
this.elem.appendChild(this.captionHolder);
}
March 11th, 2008 at 8:13 am (#)
cool thanks David. I will add it to the code tonight :o)
I like the idea of giving users both options for captions so i will add that to the script tonight.
thanks again :o)
March 11th, 2008 at 8:23 am (#)
[…] investigated using ProtoFlow for the next version of videoDB. Initial results look _very_ […]
March 11th, 2008 at 8:24 am (#)
Very nice! I’ve already looked into using protoflow for the next version of videoDB. Looks promising.
Have not been able sofar to attach links to the images though. Any idea?
Thanks,
andi
March 11th, 2008 at 8:28 am (#)
btw- also noticed that the width/height ratio seems to be off- at least in my case where the images are not all same size?
March 11th, 2008 at 8:28 am (#)
andig: You can put the link on the captions text itself (since its just HTML. I wouldn’t want to attach a link to the image itself since when you click the default behavior is to bring the object to front when clicked.
March 11th, 2008 at 8:39 am (#)
[…] ver la página de introducción de este nuevo paquete, ver la demo o descargarlo […]
March 11th, 2008 at 9:47 am (#)
It would be cool if the images can be dragged (skipping the slider), left & right arrows would navigate back & forth (one at a time), if they could also be circular (the two ends joined in the distant horizon), with ability to to choose any image as a starting point (even two side by side). And if the two-at-a-time (side by side) option is used, then arrow key navigation would rotate them left & right (further on side by side) to the next emerging pair. Otherwise, I love it anyway!
March 11th, 2008 at 10:10 am (#)
The raw HTML would be more useful if the images and captions were interleaved. The current markup would look very strange unstyled (the images and captions are disconnected). e.g.
Caption 1
Caption 2
March 11th, 2008 at 10:22 am (#)
[…] ProtoFlow first preview release… 서비스에 써먹을 일이 생길 것 같아서 (tags: javascript) This work, unless otherwise expressly stated, is licensed under a Creative Commons Attribution-Share Alike 2.0 Korea License. var adv_width = ‘500′; var adv_height = ‘0′; var adv_key = ‘20070407114234′; var adv_txuserid = ‘lLof’; var adv_ad_align_type = ‘1′; var adv_lo_border = ‘cecece’; var adv_lo_background = ‘ffffff’; var adv_lo_adtitle = ‘4679C2′; var adv_lo_addesc = ‘595959′; var adv_lo_adurl = ‘737373′; var adv_adno = ‘3′; var adv_bg_img = ’skin001′; var adv_ui_type = ‘S’; getAdClixAD(’20070407114234′); […]
March 11th, 2008 at 12:05 pm (#)
[…] Un CoverFlow avec Prototype.js et Script.aculo.us Le 11 mars 2008 à 22:05 par chris Javascript est de plus en plus impressionnant. Vous pouvez maintenant créer un coverflow avec quelques lignes de code grâce à ProtoFlow. […]
March 11th, 2008 at 1:41 pm (#)
[…] Fonte: http://blog.deensoft.com/2008/03/10/protoflow-first-preview-release/ […]
March 11th, 2008 at 2:35 pm (#)
Very, very cool.
Ever thought about doing the reflection-part with PHP’s GD on the server side? Probably the best option when looking at the performance. Great work.
March 11th, 2008 at 3:44 pm (#)
Looks great - thanks for releasing it!
One feature request - it would be great if the arrow keys worked for navigation.
March 11th, 2008 at 4:17 pm (#)
Visually, looks great. Semantically, I agree with Matt- I don’t like the fact that the captions are completely divorced from the pictures. If someone has CSS turned off, it’s a pain to figure out which captions go with which images.
I hope that if you had something like
<img id=”img1″ class=”protoimg” …
<span id=”capt1″ class=”protocaption” …
you could hopefully still write some javascript that could tie this up and make it look just as nice visually, but i haven’t looked through the source so i can’t say for sure. Something like that would further divorce content from style and allow me to adopt your sweet visual styles without forcing me to change my existing code too much.
My apologies if the above html doesn’t look formatted, I tried..
March 11th, 2008 at 4:36 pm (#)
[…] ProtoFlow first preview release… :: Deensoft (tags: javascript prototype script.aculo.us coverflow library scriptaculous web **) […]
March 11th, 2008 at 6:27 pm (#)
Thank you everyone for a great response. I have noted down all of the requests above and will be adding them to the script in priority order.
1. Fix caption system - I agree that there should be better system to do this. I will probably go with Liam’s idea for captions. We shall see.
2. Reflection - Most probably using Canvas tag to produce reflection.
More will be added to this list later :o)
If you guys want to contribute a fix to the script please feel free. I will host it here and you will be given full credits for the code you submit.
Thank you once again for awesome feedback!
March 11th, 2008 at 6:44 pm (#)
Very, very cool.
March 11th, 2008 at 11:49 pm (#)
[…] joli et c’est facile http://blog.deensoft.com/2008/03/10/protoflow-first-preview-release/ […]
March 12th, 2008 at 12:01 am (#)
[…] de détail ici, pour une DEMO c’est ici, et pour le télécharger ici Partager et Découvrir : Ces icônes […]
March 12th, 2008 at 6:22 am (#)
If you go with Liams way of adding captions, it would be nice to keep the anchor tags. Would also love to have hrefs on either caption of image- I feel image is more intuitive to click on.
March 12th, 2008 at 12:19 pm (#)
I think this is very slick!
In my application of it, I’m using img’s nested within divs as the stack elements. In my hands on ie7, this created a problem because the img receives the click events, but it’s the top-level divs that are the actual stack elements getting indexed and moved. handleClick therefore ends up generating null index attributes (line 173). It appears handleClick needs to find the top-level element on the stack and not the nested element triggering the event (a bit odd to me, since handleClick is indeed attached to the parent). I’m sure you can do better, but a fix that works for me is the addition of one line to recurse upwards to find a stack element:
handleClick: function(e)
{
elem = Event.element(e);
while (elem.parentNode != this.elem) elem = elem.parentNode; // recurse upward to find stack element
v = elem.getAttribute(”index”);
this.currIndex = v;
this.goTo(v);
this.updateSlider(v);
},
Anyone else seeing this behavior?
Nevertheless, great work!
March 12th, 2008 at 8:28 pm (#)
[…] ProtoFlow - Descargar […]
March 12th, 2008 at 11:32 pm (#)
It’s easy to use.
Thank you very much.
My page
March 13th, 2008 at 12:46 am (#)
[…] Site oficial: Deensoft […]
March 13th, 2008 at 12:51 am (#)
[…] ProtoFlow 是一个开源的内容浏览程序，创建于Prototype和script.aculo.us框架，可以实现像iTunes封面悬浮流动那样的效果。 […]
March 13th, 2008 at 4:34 am (#)
Why reinventing the wheel?
Take a look at:
Image Flow 0.8
http://imageflow.finnrudolph.de/
It’s a well tested, cross-browser script based on jquery.
March 13th, 2008 at 4:58 am (#)
Jim: I don’t think this is reinventing the wheel, Image Flow 0.8 is based on JQuery and this is based on Prototype. Different frameworks can do the same thing - nothing wrong with that.
However, I would like to see some improvements in the script specially the ones mentioned above in other replies.
March 13th, 2008 at 5:29 am (#)
@Mark
Sure. I took a second look at Image Flow and found no trace of jQuery. So i was wrong with that, sorry. Image Flow seems to be based on a original script made by Michael Perry:
http://www.adventuresinsoftware.com/blog/?p=104
March 13th, 2008 at 5:35 am (#)
@Jim and @Mark:
The point of ProtoFlow is NOT to reinvent the wheel. The point is to learn JS. That’s why i wrote ProtoFlow. You don’t have to use ProtoFlow if you don’t wish to. Its just another script out there that does something that someone else in this world might have already done.
:o)
March 13th, 2008 at 6:42 am (#)
Hi,
Beautifull work.
Someone suggest to use alt property of image as caption.
This line of code do the trick for me :
this.captions = this.stack.pluck(”alt”);
Hope this help.
March 13th, 2008 at 8:52 am (#)
This is outstanding work, thanks for sharing it!
I noticed a comment on The Ajaxian regarding the ordering of images but thought you may be reading comments more closely here… One person suggested putting the image in the middle of the list in front, but I like your current implementation because the first three images in the list are the most prominent (perhaps the most important items are in the front due to timestamps, priority, etc.).
That got me thinking, for maximum flexibility perhaps you could allow for a tag to indicate which image is front and center. Maybe class=”center” inside the image tag or something along those lines.
March 13th, 2008 at 12:55 pm (#)
[…] reading through comments on the original launch post I finally got a chance to update the ProtoFlow script for with latest […]
March 13th, 2008 at 1:06 pm (#)
I have updated the script:
http://blog.deensoft.com/2008/03/13/protoflow-updated-better-captions-image-reflection/
March 13th, 2008 at 6:18 pm (#)
[…] ProtoFlow first preview release… :: Deensoft (tags: javascript prototype coverflow scriptaculous) Share and Enjoy:These icons link to social bookmarking sites where readers can share and discover new web pages. […]
March 14th, 2008 at 4:44 am (#)
Hi,
For another example take a look here:
http://noxon.nl/home/en
I have an important remark here. Do not include all scriptaculous files is you don’t need them. This line:
should be changed to:
March 14th, 2008 at 11:24 am (#)
[…] ProtoFlow… CoverFlow with Protoype Des versions Flash étaient déjà disponibles mais voici une version de galerie photo réalisée avec prototype et reprenant le fameux CoverFlow d’Apple. (tags: javascript prototype coverflow scriptaculous library) […]
March 14th, 2008 at 10:59 pm (#)
[…] ProtoFlow first preview release… :: Deensoft […]
March 15th, 2008 at 6:58 am (#)
Good job
March 15th, 2008 at 4:34 pm (#)
[…] Sitio: ProtoFlow […]
March 17th, 2008 at 12:05 pm (#)
[…] is a script which implements this on your website using Javascript. It generates the effects and interface using Prototype.js and Scriptaculous, and the image reflections using […]
March 23rd, 2008 at 2:06 am (#)
[…] ProtoFlow first preview release? :: Deensoft - […]
March 25th, 2008 at 8:59 am (#)
[…] Obaid Ahmed has written a coverflow-like component on top of Prototype and Script.aculo.us called ProtoFlow. […]
March 25th, 2008 at 11:32 am (#)
[…] ProtoFlow: Coverflow for Prototype Posted on March 25, 2008 by Glenn. Categories: ajax.Obaid Ahmed has written a coverflow-like component on top of Prototype and Script.aculo.us called ProtoFlow. […]
May 11th, 2008 at 10:04 pm (#)
[…] ProtoFlow- ProtoFlow is a coverflow effect written in Javascript. It uses Prototype, Scriptaculous and also […]