• March 26, 2008: IE7 had some issues which have been resolved

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!

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!

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="http://www.google.com"><img src="image1.jpg" alt="Caption for this image 1"/></a>
	<a href="http://www.google.com"><img src="image2.jpg" alt="Caption for this image 2"/></a>
	<a href="http://www.google.com"><img src="image3.jpg" alt="Caption for this image 3"/></a>
	.....
	<a href="http://www.google.com"><img src="imageN.jpg" alt="Caption for this image N"/></a>
</div>
			

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

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