Caption 1 Caption 2 Caption 3 Caption 4 Caption 5 Caption 6 Caption 7 Caption 8

Download -Latest Revision

What is ProtoFlow?

ProtoFlow is a coverflow effect written in Javascript. It uses Prototype and Scriptaculous to do bulk of the work and it uses Reflection.js to do all the image reflections stuff!

Why create this effect?

Well mainly because I felt like it. There are few other coverflow implementations out there but I couldn't find any that used Prototype and Scriptaculous!

How to use it?

Its fairly easy to use this lib. Just follow the steps:
  1. Add Prototype and Scriptaculous and Reflection.js to your page
  2. Add ProtoFlow.js and ProtoFlow.css to your page
  3. Add Markup and onLoad event (as described below)


Your HTML Markup would look like:
<div id="myCoverFlow">
	<a href=""><img src="image1.jpg" alt="Caption for this image 1"/></a>
	<a href=""><img src="image2.jpg" alt="Caption for this image 2"/></a>
	<a href=""><img src="image3.jpg" alt="Caption for this image 3"/></a>
	<a href=""><img src="imageN.jpg" alt="Caption for this image N"/></a>
Than you can initialize ProtoFlow like:
Event.observe(window, 'load', function(evnt)
	var ProtFlowExample = new ProtoFlow($("myCoverFlow"), {
		startIndex: 2,	//which image do you want the flow
						//to focus on by default
		slider: true,	//show or hide slider?
		captions: true,	//show or hide captions, by default we hide it. 
				//So YOU MUST turn it on here
		useReflection: false,	//Add reflection to your images. Please 
				//note that this will slow down rendering.
		enableOnClickScroll: true //add NEW! if you wish to keep scrolling 
				//on click just set this to be true 
That's it! This should render the effect automagically!


If you like the script and would like to contribute towards my coffee expenses please feel free to donate. :)

Where do I submit comments/suggestions/bug reports ?

You can post your comments, suggestions or bug reports on our blog.

ProtoFlow is developed by - Hire us for your next web project!