ProtoFlow

ProtoFlow

License

Copyright © 2008 DeenSoft.com

You are free to use this file wherever you wish but please do let us know at blog.deensoft.com so that we can showcase it. You can even post your bugs on our blog and we will fix them asap. This code is being release under open-terms. Use at your own risk. Give us feedback. Help us fix bugs and implement new features. :) contact@deensoft.com

You can follow up with more comments and suggestions on our blog http://blog.deensoft.com

Description

ProtoFlow v0.8 is a very early preview release that simulates Apples CoverFlow effect using Prototype/Scriptaculous lib.

ChangeLog

March 26, 2008:

Fixed major issue with IE7 and z-index for scrollbar (Thanks to all those who contributed on the blog) March 19, 2008
Fixed issues with IE
Fixed major bug with images and links...

Initial

Added Reflection
Fixed Captions

How to use

var myFlow = new ProtoFlow(
                    $('myElem'),
                    {
                        captions: 'captionsList'
                    }
);

Summary

ProtoFlow
Functions
initialize	Constructor for ProtoFlow Class.
diableLinks	This function goes through all the anchor tags in the stack and simply disables the href attribute.
autoPlay	Internal function that is used to scroll through the list automatically
handleWindowResize	Currently does nothing.
hanldeWheel	This function should handle onwheel scroll events.
handleSliderChange	wrapper function called after slider has been moved.
handleSlider	wrapper function called after slider has been moved.
handleClick	When an image is clicked we handle it by finding the appropiate index and then moving the images and updating the scrollbar as well.
getCurrentPos	Returns the current position of the image that is being focused on.
goTo	takes an index and moves the images to that index based on the flex and index provided.
updateSlider	updates the slider to currect position.
step	Steps through the animation process.
slideTo	This function sets up a timer and calls step on the interval specified via options.
moveTo	Actually moves the images based on the position provided by step function

Functions

initialize

initialize: function( elem,
opt )

Constructor for ProtoFlow Class.

Parameters

elem	{Mixed} the HTML object that ProtoFlow is initialize from. This can be either an HTML Object or ID to an HTML object.
opt	{Object} config Object

diableLinks

This function goes through all the anchor tags in the stack and simply disables the href attribute. This is required if the user has set ‘enableOnClickScroll’ to be true

autoPlay

autoPlay: function()

Internal function that is used to scroll through the list automatically

handleWindowResize

handleWindowResize: function( event )

Currently does nothing. This will be implemented later on. Internal Function Parameters: event - {Object} Browser generated event

hanldeWheel

This function should handle onwheel scroll events. This is quite buggy at the moment so disabled by default.

Parameters

event

{Object} Browser Event

handleSliderChange

handleSliderChange: function( index )

wrapper function called after slider has been moved. This in turn calls goTo function which moves the images around.

Parameters

index

{int} index to move to

handleSlider

handleSlider: function( index )

wrapper function called after slider has been moved. This in turn calls goTo function which moves the images around.

Parameters

index

{int} index to move to.

handleClick

handleClick: function( e )

When an image is clicked we handle it by finding the appropiate index and then moving the images and updating the scrollbar as well.

Parameters

e	{Object} Browser Event

getCurrentPos

getCurrentPos: function()

Returns the current position of the image that is being focused on.

Returns

current position

{int} index

goTo

goTo: function( index )

takes an index and moves the images to that index based on the flex and index provided. This also updates the captions to show the correct caption if enabled.

Parameters

index

{int} index in the stack to move to

updateSlider

updateSlider: function( index )

updates the slider to currect position.

parameters

index

{int} Index for the stack

step

step: function()

Steps through the animation process. This is what makes it look so smooth ;)

slideTo

slideTo: function( x )

This function sets up a timer and calls step on the interval specified via options. parameters: x - {int} index to move to

moveTo

moveTo: function( currentPos )

Actually moves the images based on the position provided by step function

parameters

currentPos

{int} Position to move to

initialize: function( elem,
opt )

Constructor for ProtoFlow Class.

autoPlay: function()

Internal function that is used to scroll through the list automatically

handleWindowResize: function( event )

Currently does nothing.

handleSliderChange: function( index )

wrapper function called after slider has been moved.

handleSlider: function( index )

wrapper function called after slider has been moved.

handleClick: function( e )

When an image is clicked we handle it by finding the appropiate index and then moving the images and updating the scrollbar as well.

getCurrentPos: function()

Returns the current position of the image that is being focused on.

goTo: function( index )

takes an index and moves the images to that index based on the flex and index provided.

updateSlider: function( index )

updates the slider to currect position.

step: function()

Steps through the animation process.

slideTo: function( x )

This function sets up a timer and calls step on the interval specified via options.

moveTo: function( currentPos )

Actually moves the images based on the position provided by step function