ProtoFlow

Have you been looking for a cool way to display information on your web site or application. Well, one interesting script that can display information in a cool effect is ProtoFlow.

ProtoFlow is very easy to use and below is how you use it as described on the ProtoFlow web site.

How to use it?

Its fairly easy to use this lib. Just follow the steps:

  1. Download ProtoFlow and extract it.
  2. Add Prototype and Scriptaculous and Reflection.js to your page
  3. Add ProtoFlow.js and ProtoFlow.css to your page
  4. Add Markup and onLoad event (as described below)

Implementation:

Your HTML Markup would look like:


<div id="myCoverFlow">
	<img src="image1.jpg" alt="Caption for this image 1"/>
	<img src="image2.jpg" alt="Caption for this image 2"/>

	<img src="image3.jpg" alt="Caption for this image 3"/>
	.....
	<img src="imageN.jpg" alt="Caption for this image N"/>

</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.
	});
});
			

While there are other scripts that create a similar effect, ProtoFlow is the only one that I know of using Prototype and Scriptaculous. This makes it perfect if you are already using these libraries (just remember to compress the script files as appropriate as the libraries are a little large).

You can get more information about ProtoFlow and see a demo of it here.

If you find any interesting uses for the script I'd love to hear about it (you can leave a comment or you can write a blog post using your free Ajaxonomy account). So, start making that cool website or application and use this or some other interesting effect to make it stand out.

This is really a great idea.

This is very well done. I would like to see just a hint of separation between the image and the reflection.
But my biggest question - how long until the Web 2.0-style reflection effects fall out of favor?

Post new comment

The content of this field is kept private and will not be shown publicly.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <pre> <div> <blockquote> <object> <embed> <img> <param>
  • Lines and paragraphs break automatically.
  • Web page addresses and e-mail addresses turn into links automatically.

More information about formatting options

CAPTCHA
This question is for testing whether you are a human visitor and to prevent automated spam submissions.
Copy the characters (respecting upper/lower case) from the image.