ProtoFlow2 — sneakpeak

August 6th, 2008  |  Published in General, Javascript, ProtoFlow, Scriptaculous

Well we have a little surprise coming for you guys soon… check it out…

ProtoFlow2 Sneakpeak


ProtoFlow - Now supports Keyboard and Mouse Wheel Events!

March 31st, 2008  |  Published in Javascript, Projects, ProtoFlow, Prototype, Scriptaculous

Well it doesn’t get any better than this. I have been over whelmed by the response that community has given to ProtoFlow. While I am still working to fix some issues with image positioning, Fabian and  Martin posted a add-on for keyboard and mouse wheel support. After integrating their code I had to release it to general public asap. Thank you guys for your contribution.

By default both keyboard and mouse wheel support is turned on. To turn keyboard support off you can set options: enableKeyboard to false and to disable the mouse wheel events just turn enableMouse to false. Notice how the mouse wheel effect only works when your mouse is over the ProtoFlow object.

The latest code should be up here.

Small update to ProtoFlow.

March 26th, 2008  |  Published in Javascript, Projects, ProtoFlow, Prototype

I have released another small update to the script. It has now been tested in IE6 and IE7 along with Firefox 2.0 and Safari. I have also added docs to the project.

I think this script should be in stable condition now. If you stumble upon any bugs or have any suggestions please post them in your comments to this thread.

You can find the latest version for download here.

ProtoFlow Updated - Better Captions & Image Reflection!

March 13th, 2008  |  Published in Javascript, ProtoFlow, Prototype, Scriptaculous

March 17, 2008: I have updated the script again. It now supports <a> tags. More information can be found here.

After reading through comments on the original launch post I finally got a chance to update the ProtoFlow script for with latest changes.

It now has a better caption system. It now supports image Reflection!

Credit goes out to those who participated in original blog post with all the helpful comments and suggestions. I am using Reflection.js found here. Many thanks to the author.

So fellow developers/users as done previously please provide your feedback and comments.

You can find a better documentation here and code is located at the bottom of the page here

ProtoFlow first preview release…

March 10th, 2008  |  Published in Javascript, ProtoFlow, Prototype, Scriptaculous

ProtoFlow has been updated!

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.


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>


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

Introducing ProtoFlow

January 24th, 2008  |  Published in Javascript, ProtoFlow, Prototype, Scriptaculous

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):